Navigation - Transactional header

Use the transactional header to show users they are on a transactional journey on a HSE service.

Copy code

<header class="hse-header hse-header--transactional" role="banner">
  <div class="hse-width-container hse-header__container">
    <div class="hse-header__logo hse-header__logo--only"><a class="hse-header__link" href="/" aria-label="H-S-E - homepage">
        <svg class="hse-logo" width="73" height="54" viewBox="0 0 73 54" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M41.5258 29.1171C41.5258 29.1171 45.1076 23.5048 54.1493 24.6407C63.192 25.7777 66.4905 23.161 66.4905 23.161C66.4905 23.161 60.3334 31.6754 53.1877 29.386C46.0421 27.0954 41.5258 29.1171 41.5258 29.1171Z" fill="currentColor" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M35.813 49.0023C35.813 49.0023 39.3959 43.391 48.4387 44.5258C57.4815 45.6639 60.7811 43.0472 60.7811 43.0472C60.7811 43.0472 54.6228 51.5595 47.4761 49.27C40.3305 46.9783 35.813 49.0023 35.813 49.0023Z" fill="currentColor" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M47.3302 10.3113C47.3302 10.3113 50.912 4.70007 59.9537 5.83709C68.9954 6.97411 72.2949 4.35742 72.2949 4.35742C72.2949 4.35742 66.1344 12.8696 58.9911 10.5802C51.8466 8.28961 47.3302 10.3113 47.3302 10.3113Z" fill="currentColor" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M29.7617 24.0429C29.7617 24.0429 29.1072 24.6544 25.7908 24.6544H16.8031C15.3614 24.6544 15.1578 25.2306 15.1578 25.2306C15.2219 24.8835 15.4131 23.9625 15.4761 23.6198C17.2619 14.0422 18.6677 6.51935 18.7329 6.25603C19.2558 4.18471 21.1148 3.75943 21.1148 3.75943L12.5049 3.74841C12.5049 3.74841 10.745 3.78036 10.1186 6.27255C9.93977 6.992 3.8805 39.7695 2.58835 47.0808C2.29259 48.7554 0.5 49.3526 0.5 49.3526H9.02211C9.02211 49.3526 10.6696 49.2182 11.1138 47.0808C11.7166 44.1886 12.8423 37.7775 14.2717 30.0783C14.4673 28.9248 15.6684 29.0394 15.6684 29.0394H24.2512C24.2512 29.0394 27.0841 29.0945 28.3751 27.6633C29.6672 26.2365 29.7617 24.0429 29.7617 24.0429Z" fill="currentColor" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M31.6645 25.18C29.9372 57.8594 5.93065 52.9389 5.93065 52.9389C5.93065 52.9389 5.92166 53.1516 5.92053 53.1846C9.6564 53.9415 37.6473 58.3034 39.4051 28.6671C41.1335 -4.0112 65.1412 0.907069 65.1412 0.907069C65.1412 0.907069 65.1491 0.693327 65.1513 0.661376C61.4132 -0.0944338 33.4245 -4.45962 31.6645 25.18Z" fill="currentColor" />
        </svg>
      </a>
    </div>
    <div class="hse-header__transactional-service-name">
      <a class="hse-header__transactional-service-name--link" href="https://www.hse.ie/hse-services/gps/how-to-register-with-a-gp-surgery/"></a>
    </div>

  </div>

</header>

Nunjucks

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for transactional transactional header
Name	Type	Required	Description
Name showNav	Type boolean	Required true	Description Set to `true` to show the navigation links in the header.
Name showSearch	Type boolean	Required true	Description Set to `true` to show the site search input form.
Name homeHref	Type string	Required No	Description The `href` of the link for the logo and mobile home link in the navigation links. Defaults to "/"
Name ariaLabel	Type string	Required No	Description Aria label for the logo href. Defaults to "HSE homepage".
Name organisation	Type object	Required false	Description Settings for header with organisational logo.
Name organisation{}.name	Type string	Required false	Description Organisation name value.
Name organisation{}.descriptor	Type string	Required false	Description Organisation descriptor.
Name organisation{}.logoURL	Type string	Required true	Description Organisation logo if using a static asset, such as PNG, is preferred.
Name primaryLinks	Type array	Required false	Description Array of navigation links for use in the header.
Name primaryLinks[].url	Type string	Required true	Description The href of a navigation item in the header.
Name primaryLinks[].label	Type string	Required false	Description The label of a navigation item in the header.
Name transactional	Type string	Required No	Description Set to `true` if this is a transactional header (with smaller logo).
Name transactionalService	Type object	Required false	Description Settings for transactional service header.
Name transactionalService{}.name	Type string	Required false	Description Transactional service name value.
Name transactionalService{}.href	Type string	Required false	Description The href of the transactional header name.
Name transactionalService{}.longName	Type boolean	Required false	Description Set this to `true` if the transactional service name is longer than 22 characters.
Name searchAction	Type string	Required No	Description Custom search action endpoint.
Name searchInputName	Type string	Required No	Description The name for the search field. Defaults to "q"
Name classes	Type string	Required false	Description Classes to add to the header container.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the header container.

Copy code

{% from 'header/macro.njk' import header %}

{{ header({
  "transactionalService": {
      "name": "",
      "href": "https://www.hse.ie/hse-services/gps/how-to-register-with-a-gp-surgery/"
    },
    "showNav": "false",
    "showSearch": "false"
  })
}}

A transactional header is one of 2 versions of the header we use for services. The other is a default header.

When to use transactional header

Use the transactional header for transactional journeys. Include the service name to help users understand which service they are using.

When not to use transactional header

Do not use a transactional header if the page is not part of a transactional service.

Research

We have found that the full header is too distracting to be used in transactional services.

Updated: August 2023