Navigation - Header

Use the header to show users they are on an HSE service and help them get started in finding what they need.

Open this default header example in new window
Copy default header code 
<header class="hse-header" role="banner">
  <div class="hse-width-container hse-header__container">
    <div class="hse-header__logo"><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__content" id="content-header">

      <div class="hse-header__menu">
        <button class="hse-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-label="Open menu">Menu</button>
      </div>

      <div class="hse-header__search">
        <button class="hse-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
          <svg class="hse-icon hse-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.86 14.53l3.86 3.86a.94.94 0 010 1.33.94.94 0 01-1.33 0l-3.86-3.86a6.58 6.58 0 111.33-1.33zm-5.27-8.64a4.7 4.7 0 100 9.4 4.7 4.7 0 000-9.4z" />
          </svg>
          <span class="hse-u-visually-hidden">Search</span>
        </button>
        <div class="hse-header__search-wrap" id="wrap-search">
          <form class="hse-header__search-form" id="search" action="https://www.hse.ie/search/" method="get" role="search">
            <label class="hse-u-visually-hidden" for="search-field">Search the HSE website</label>

            <input class="hse-search__input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
            <button class="hse-search__submit" type="submit">
              <svg class="hse-icon hse-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.86 14.53l3.86 3.86a.94.94 0 010 1.33.94.94 0 01-1.33 0l-3.86-3.86a6.58 6.58 0 111.33-1.33zm-5.27-8.64a4.7 4.7 0 100 9.4 4.7 4.7 0 000-9.4z" />
              </svg>
              <span class="hse-u-visually-hidden">Search</span>
            </button>
            <button class="hse-search__close" id="close-search">
              <svg class="hse-icon hse-icon__window-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path d="M4.889 4.889 19.11 19.11m-14.222 0L19.11 4.89" stroke="#212B32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <span class="hse-u-visually-hidden">Close search</span>
            </button>
          </form>
        </div>
      </div>

    </div>

  </div>

  <nav class="hse-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
    <p class="hse-header__navigation-title">
      <span id="label-navigation">Menu</span>
      <button class="hse-header__navigation-close" id="close-menu">
        <svg class="hse-icon hse-icon__window-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M13.46 12L19 17.54V19H17.54L12 13.46L6.46 19H5V17.54L10.54 12L5 6.46V5H6.46L12 10.54L17.54 5H19V6.46L13.46 12Z" />
        </svg>
        <span class="hse-u-visually-hidden">Close menu</span>
      </button>
    </p>
    <ul class="hse-header__navigation-list">
      <li class="hse-header__navigation-item hse-header__navigation-item--for-mobile">
        <a class="hse-header__navigation-link" href="/">
          Home
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>

        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="https://www.hse.ie/conditions">
          Health A-Z
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="https://www.hse.ie/live-well/">
          Live Well
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="https://www.hse.ie/mental-health/">
          Mental health
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="https://www.hse.ie/conditions/social-care-and-support/">
          Care and support
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="https://www.hse.ie/pregnancy/">
          Pregnancy
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="https://www.hse.ie/hse-services/">
          HSE services
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
    </ul>
  </nav>

</header>
Close default header code
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 default 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 default header code 
{% from 'header/macro.njk' import header %}

{{ header({
    "showNav": "true",
    "showSearch": "true",
    "primaryLinks": [
      {
        "url"  : "https://www.hse.ie/conditions",
        "label" : "Health A-Z"
      },
      {
        'url' : 'https://www.hse.ie/live-well/',
        'label' : 'Live Well'
      },
      {
        'url' : 'https://www.hse.ie/mental-health/',
        'label' : 'Mental health'
      },
      {
        'url'  : 'https://www.hse.ie/conditions/social-care-and-support/',
        'label' : 'Care and support'
      },
      {
        'url'  : 'https://www.hse.ie/pregnancy/',
        'label' : 'Pregnancy'
      },
      {
        'url' : 'https://www.hse.ie/hse-services/',
        'label' : 'HSE services'
      }
    ]
  })
}}
Close default header code

We have 3 versions of the header for services on the HSE website (hse.ie):

  • the default header
  • the service header
  • the transactional header

We also have an organisational header for other HSE organisations.

When to use the header

Use the HSE default, service or transactional header at the top of every page if your service is on the hse.ie domain.

Use the organisational header if your service is on another domain.

When not to use the header

Do not use 1 of the hse.ie headers if your service is on another domain.

How to use

Default header

Use the default header on the HSE website.

Open this default header example in new window
Copy default header code 
<header class="hse-header" role="banner">
  <div class="hse-width-container hse-header__container">
    <div class="hse-header__logo"><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__content" id="content-header">

      <div class="hse-header__menu">
        <button class="hse-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-label="Open menu">Menu</button>
      </div>

      <div class="hse-header__search">
        <button class="hse-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
          <svg class="hse-icon hse-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.86 14.53l3.86 3.86a.94.94 0 010 1.33.94.94 0 01-1.33 0l-3.86-3.86a6.58 6.58 0 111.33-1.33zm-5.27-8.64a4.7 4.7 0 100 9.4 4.7 4.7 0 000-9.4z" />
          </svg>
          <span class="hse-u-visually-hidden">Search</span>
        </button>
        <div class="hse-header__search-wrap" id="wrap-search">
          <form class="hse-header__search-form" id="search" action="https://www.hse.ie/search/" method="get" role="search">
            <label class="hse-u-visually-hidden" for="search-field">Search the HSE website</label>

            <input class="hse-search__input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
            <button class="hse-search__submit" type="submit">
              <svg class="hse-icon hse-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.86 14.53l3.86 3.86a.94.94 0 010 1.33.94.94 0 01-1.33 0l-3.86-3.86a6.58 6.58 0 111.33-1.33zm-5.27-8.64a4.7 4.7 0 100 9.4 4.7 4.7 0 000-9.4z" />
              </svg>
              <span class="hse-u-visually-hidden">Search</span>
            </button>
            <button class="hse-search__close" id="close-search">
              <svg class="hse-icon hse-icon__window-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path d="M4.889 4.889 19.11 19.11m-14.222 0L19.11 4.89" stroke="#212B32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <span class="hse-u-visually-hidden">Close search</span>
            </button>
          </form>
        </div>
      </div>

    </div>

  </div>

  <nav class="hse-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
    <p class="hse-header__navigation-title">
      <span id="label-navigation">Menu</span>
      <button class="hse-header__navigation-close" id="close-menu">
        <svg class="hse-icon hse-icon__window-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M13.46 12L19 17.54V19H17.54L12 13.46L6.46 19H5V17.54L10.54 12L5 6.46V5H6.46L12 10.54L17.54 5H19V6.46L13.46 12Z" />
        </svg>
        <span class="hse-u-visually-hidden">Close menu</span>
      </button>
    </p>
    <ul class="hse-header__navigation-list">
      <li class="hse-header__navigation-item hse-header__navigation-item--for-mobile">
        <a class="hse-header__navigation-link" href="/">
          Home
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>

        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="https://www.hse.ie/conditions">
          Health A-Z
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="https://www.hse.ie/live-well/">
          Live Well
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="https://www.hse.ie/mental-health/">
          Mental health
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="https://www.hse.ie/conditions/social-care-and-support/">
          Care and support
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="https://www.hse.ie/pregnancy/">
          Pregnancy
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="https://www.hse.ie/hse-services/">
          HSE services
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
    </ul>
  </nav>

</header>
Close default header code
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 default 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 default header code 
{% from 'header/macro.njk' import header %}

{{ header({
    "showNav": "true",
    "showSearch": "true",
    "primaryLinks": [
      {
        "url"  : "https://www.hse.ie/conditions",
        "label" : "Health A-Z"
      },
      {
        'url' : 'https://www.hse.ie/live-well/',
        'label' : 'Live Well'
      },
      {
        'url' : 'https://www.hse.ie/mental-health/',
        'label' : 'Mental health'
      },
      {
        'url'  : 'https://www.hse.ie/conditions/social-care-and-support/',
        'label' : 'Care and support'
      },
      {
        'url'  : 'https://www.hse.ie/pregnancy/',
        'label' : 'Pregnancy'
      },
      {
        'url' : 'https://www.hse.ie/hse-services/',
        'label' : 'HSE services'
      }
    ]
  })
}}
Close default header code

Service header

Use the service header if your service is on the HSE website.

Open this service header example in new window
Copy service header code 
<header class="hse-header" role="banner">
  <div class="hse-width-container hse-header__container">
    <div class="hse-header__logo"><a class="hse-header__link hse-header__link--service " 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>
        <span class="hse-header__service-name">
          Digital service manual
        </span>
      </a>
    </div>

    <div class="hse-header__content" id="content-header">

      <div class="hse-header__menu">
        <button class="hse-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-label="Open menu">Menu</button>
      </div>

      <div class="hse-header__search">
        <button class="hse-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
          <svg class="hse-icon hse-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.86 14.53l3.86 3.86a.94.94 0 010 1.33.94.94 0 01-1.33 0l-3.86-3.86a6.58 6.58 0 111.33-1.33zm-5.27-8.64a4.7 4.7 0 100 9.4 4.7 4.7 0 000-9.4z" />
          </svg>
          <span class="hse-u-visually-hidden">Search</span>
        </button>
        <div class="hse-header__search-wrap" id="wrap-search">
          <form class="hse-header__search-form" id="search" action="https://www.hse.ie/search/" method="get" role="search">
            <label class="hse-u-visually-hidden" for="search-field">Search the HSE website</label>

            <input class="hse-search__input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
            <button class="hse-search__submit" type="submit">
              <svg class="hse-icon hse-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.86 14.53l3.86 3.86a.94.94 0 010 1.33.94.94 0 01-1.33 0l-3.86-3.86a6.58 6.58 0 111.33-1.33zm-5.27-8.64a4.7 4.7 0 100 9.4 4.7 4.7 0 000-9.4z" />
              </svg>
              <span class="hse-u-visually-hidden">Search</span>
            </button>
            <button class="hse-search__close" id="close-search">
              <svg class="hse-icon hse-icon__window-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path d="M4.889 4.889 19.11 19.11m-14.222 0L19.11 4.89" stroke="#212B32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <span class="hse-u-visually-hidden">Close search</span>
            </button>
          </form>
        </div>
      </div>

    </div>

  </div>

  <nav class="hse-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
    <p class="hse-header__navigation-title">
      <span id="label-navigation">Menu</span>
      <button class="hse-header__navigation-close" id="close-menu">
        <svg class="hse-icon hse-icon__window-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M13.46 12L19 17.54V19H17.54L12 13.46L6.46 19H5V17.54L10.54 12L5 6.46V5H6.46L12 10.54L17.54 5H19V6.46L13.46 12Z" />
        </svg>
        <span class="hse-u-visually-hidden">Close menu</span>
      </button>
    </p>
    <ul class="hse-header__navigation-list">
      <li class="hse-header__navigation-item hse-header__navigation-item--for-mobile">
        <a class="hse-header__navigation-link" href="/">
          Home
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>

        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="#">
          HSE service standard
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="#">
          Design system
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="#">
          Content style guide
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="#">
          Accessibility
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="#">
          Community and contribution
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
    </ul>
  </nav>

</header>
Close service header code
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 service 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 service header code 
{% from 'header/macro.njk' import header %}

{{ header({
  "service": {
    "name": "Digital service manual"
  },
  "showNav": "true",
  "showSearch": "true",
  "primaryLinks": [
      {
        "url"  : "#",
        "label" : "HSE service standard"
      },
      {
        'url' : '#',
        'label' : 'Design system'
      },
      {
        'url'  : '#',
        'label' : 'Content style guide'
      },
      {
        'url'  : '#',
        'label' : 'Accessibility'
      },
      {
        'url' : '#',
        'label' : 'Community and contribution'
      }
    ]
  })
}}
Close service header code

Transactional header

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

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

Open this transactional header example in new window
Copy transactional header 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/">Register with a GP</a>
    </div>

  </div>

</header>
Close transactional header code
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 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 transactional header code 
{% from 'header/macro.njk' import header %}

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

Organisational header

Use the organisational header if your HSE organisation or service is not part of the HSE website, for example, for an HSE clinical commissioning group or an HSE trust.

You must have a Frutiger font licence to use an organisational logo. Our guidance on typography explains how to get hold of the webfont. Read more about creating HSE organisational logos in the HSE England identity guidelines.

Open this organisational header example in new window
Copy organisational header code 
<header class="hse-header hse-header--organisation" role="banner">
  <div class="hse-width-container hse-header__container">
    <div class="hse-header__logo">
      <a class="hse-header__link" href="/" aria-label="Anytown Anyplace Anywhere HSE Foundation Trust homepage"><svg class="hse-logo" xmlns="http://www.w3.org/2000/svg">
          <path clip-rule="evenodd" d="M23.357 16.223s1.996-3.127 7.033-2.495c5.038.634 6.876-.824 6.876-.824s-3.43 4.744-7.411 3.468c-3.982-1.276-6.498-.15-6.498-.15zM20.174 27.301s1.997-3.126 7.035-2.494c5.038.634 6.876-.824 6.876-.824s-3.43 4.743-7.413 3.467c-3.98-1.276-6.498-.149-6.498-.149zM26.591 5.745s1.996-3.126 7.033-2.493c5.038.634 6.876-.824 6.876-.824s-3.432 4.742-7.412 3.467c-3.98-1.276-6.497-.15-6.497-.15zM16.803 13.395s-.365.341-2.212.341H9.583c-.803 0-.916.321-.916.321.035-.193.142-.707.177-.897.995-5.337 1.778-9.528 1.814-9.675.292-1.154 1.327-1.39 1.327-1.39l-4.797-.007s-.98.018-1.33 1.407c-.099.4-3.475 18.662-4.194 22.736C1.499 27.164.5 27.496.5 27.496h4.748s.918-.074 1.165-1.265c.336-1.612.963-5.184 1.76-9.473.109-.643.778-.579.778-.579h4.782s1.578.03 2.297-.767c.72-.795.773-2.017.773-2.017z" fill="currentColor" fill-rule="evenodd"></path>
          <path clip-rule="evenodd" d="M17.863 14.029C16.901 32.236 3.526 29.495 3.526 29.495l-.006.136c2.081.422 17.676 2.852 18.656-13.66C23.139-2.234 36.514.506 36.514.506l.006-.137c-2.083-.42-17.676-2.853-18.657 13.66z" fill="currentColor" fill-rule="evenodd"></path>
        </svg>
        <span class="hse-organisation-name">Anytown Anyplace

          <span class="hse-organisation-name-split">Anywhere</span>
        </span>

        <span class="hse-organisation-descriptor">HSE Foundation Trust</span>
      </a>
    </div>

    <div class="hse-header__content" id="content-header">

      <div class="hse-header__menu">
        <button class="hse-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-label="Open menu">Menu</button>
      </div>

      <div class="hse-header__search">
        <button class="hse-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
          <svg class="hse-icon hse-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.86 14.53l3.86 3.86a.94.94 0 010 1.33.94.94 0 01-1.33 0l-3.86-3.86a6.58 6.58 0 111.33-1.33zm-5.27-8.64a4.7 4.7 0 100 9.4 4.7 4.7 0 000-9.4z" />
          </svg>
          <span class="hse-u-visually-hidden">Search</span>
        </button>
        <div class="hse-header__search-wrap" id="wrap-search">
          <form class="hse-header__search-form" id="search" action="https://www.hse.ie/search/" method="get" role="search">
            <label class="hse-u-visually-hidden" for="search-field">Search the HSE website</label>

            <input class="hse-search__input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
            <button class="hse-search__submit" type="submit">
              <svg class="hse-icon hse-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.86 14.53l3.86 3.86a.94.94 0 010 1.33.94.94 0 01-1.33 0l-3.86-3.86a6.58 6.58 0 111.33-1.33zm-5.27-8.64a4.7 4.7 0 100 9.4 4.7 4.7 0 000-9.4z" />
              </svg>
              <span class="hse-u-visually-hidden">Search</span>
            </button>
            <button class="hse-search__close" id="close-search">
              <svg class="hse-icon hse-icon__window-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path d="M4.889 4.889 19.11 19.11m-14.222 0L19.11 4.89" stroke="#212B32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <span class="hse-u-visually-hidden">Close search</span>
            </button>
          </form>
        </div>
      </div>

    </div>

  </div>

  <nav class="hse-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
    <p class="hse-header__navigation-title">
      <span id="label-navigation">Menu</span>
      <button class="hse-header__navigation-close" id="close-menu">
        <svg class="hse-icon hse-icon__window-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M13.46 12L19 17.54V19H17.54L12 13.46L6.46 19H5V17.54L10.54 12L5 6.46V5H6.46L12 10.54L17.54 5H19V6.46L13.46 12Z" />
        </svg>
        <span class="hse-u-visually-hidden">Close menu</span>
      </button>
    </p>
    <ul class="hse-header__navigation-list">
      <li class="hse-header__navigation-item hse-header__navigation-item--for-mobile">
        <a class="hse-header__navigation-link" href="/">
          Home
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>

        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="#">
          Your hospital visit
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="#">
          Wards and departments
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="#">
          Conditions and treatments
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="#">
          Our people
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="#">
          Our research
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
    </ul>
  </nav>

</header>
Close organisational header code
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 organisational 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 organisational header code 
{% from 'header/macro.njk' import header %}

{{ header({
    "showNav": "true",
    "showSearch": "true",
    "organisation": {
      "name": "Anytown Anyplace",
      "split": "Anywhere",
      "descriptor": "HSE Foundation Trust"
    },
    "primaryLinks": [
      {
        "url"  : "#",
        "label" : "Your hospital visit"
      },
      {
        'url' : '#',
        'label' : 'Wards and departments'
      },
      {
        'url'  : '#',
        'label' : 'Conditions and treatments'
      },
      {
        'url'  : '#',
        'label' : 'Our people'
      },
      {
        'url' : '#',
        'label' : 'Our research'
      }
    ]
  })
}}
Close organisational header code

White variant

Open this organisational white header example in new window
Copy organisational white header code 
<header class="hse-header hse-header--organisation hse-header--white" role="banner">
  <div class="hse-width-container hse-header__container">
    <div class="hse-header__logo">
      <a class="hse-header__link" href="/" aria-label="Anytown Anyplace Anywhere HSE Foundation Trust homepage"><svg class="hse-logo" xmlns="http://www.w3.org/2000/svg">
          <path clip-rule="evenodd" d="M23.357 16.223s1.996-3.127 7.033-2.495c5.038.634 6.876-.824 6.876-.824s-3.43 4.744-7.411 3.468c-3.982-1.276-6.498-.15-6.498-.15zM20.174 27.301s1.997-3.126 7.035-2.494c5.038.634 6.876-.824 6.876-.824s-3.43 4.743-7.413 3.467c-3.98-1.276-6.498-.149-6.498-.149zM26.591 5.745s1.996-3.126 7.033-2.493c5.038.634 6.876-.824 6.876-.824s-3.432 4.742-7.412 3.467c-3.98-1.276-6.497-.15-6.497-.15zM16.803 13.395s-.365.341-2.212.341H9.583c-.803 0-.916.321-.916.321.035-.193.142-.707.177-.897.995-5.337 1.778-9.528 1.814-9.675.292-1.154 1.327-1.39 1.327-1.39l-4.797-.007s-.98.018-1.33 1.407c-.099.4-3.475 18.662-4.194 22.736C1.499 27.164.5 27.496.5 27.496h4.748s.918-.074 1.165-1.265c.336-1.612.963-5.184 1.76-9.473.109-.643.778-.579.778-.579h4.782s1.578.03 2.297-.767c.72-.795.773-2.017.773-2.017z" fill="currentColor" fill-rule="evenodd"></path>
          <path clip-rule="evenodd" d="M17.863 14.029C16.901 32.236 3.526 29.495 3.526 29.495l-.006.136c2.081.422 17.676 2.852 18.656-13.66C23.139-2.234 36.514.506 36.514.506l.006-.137c-2.083-.42-17.676-2.853-18.657 13.66z" fill="currentColor" fill-rule="evenodd"></path>
        </svg>
        <span class="hse-organisation-name">Anytown Anyplace

          <span class="hse-organisation-name-split">Anywhere</span>
        </span>

        <span class="hse-organisation-descriptor">HSE Foundation Trust</span>
      </a>
    </div>

    <div class="hse-header__content" id="content-header">

      <div class="hse-header__menu">
        <button class="hse-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-label="Open menu">Menu</button>
      </div>

      <div class="hse-header__search">
        <button class="hse-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
          <svg class="hse-icon hse-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.86 14.53l3.86 3.86a.94.94 0 010 1.33.94.94 0 01-1.33 0l-3.86-3.86a6.58 6.58 0 111.33-1.33zm-5.27-8.64a4.7 4.7 0 100 9.4 4.7 4.7 0 000-9.4z" />
          </svg>
          <span class="hse-u-visually-hidden">Search</span>
        </button>
        <div class="hse-header__search-wrap" id="wrap-search">
          <form class="hse-header__search-form" id="search" action="https://www.hse.ie/search/" method="get" role="search">
            <label class="hse-u-visually-hidden" for="search-field">Search the HSE website</label>

            <input class="hse-search__input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
            <button class="hse-search__submit" type="submit">
              <svg class="hse-icon hse-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.86 14.53l3.86 3.86a.94.94 0 010 1.33.94.94 0 01-1.33 0l-3.86-3.86a6.58 6.58 0 111.33-1.33zm-5.27-8.64a4.7 4.7 0 100 9.4 4.7 4.7 0 000-9.4z" />
              </svg>
              <span class="hse-u-visually-hidden">Search</span>
            </button>
            <button class="hse-search__close" id="close-search">
              <svg class="hse-icon hse-icon__window-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path d="M4.889 4.889 19.11 19.11m-14.222 0L19.11 4.89" stroke="#212B32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <span class="hse-u-visually-hidden">Close search</span>
            </button>
          </form>
        </div>
      </div>

    </div>

  </div>

  <nav class="hse-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
    <p class="hse-header__navigation-title">
      <span id="label-navigation">Menu</span>
      <button class="hse-header__navigation-close" id="close-menu">
        <svg class="hse-icon hse-icon__window-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M13.46 12L19 17.54V19H17.54L12 13.46L6.46 19H5V17.54L10.54 12L5 6.46V5H6.46L12 10.54L17.54 5H19V6.46L13.46 12Z" />
        </svg>
        <span class="hse-u-visually-hidden">Close menu</span>
      </button>
    </p>
    <ul class="hse-header__navigation-list">
      <li class="hse-header__navigation-item hse-header__navigation-item--for-mobile">
        <a class="hse-header__navigation-link" href="/">
          Home
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>

        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="#">
          Your hospital visit
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="#">
          Wards and departments
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="#">
          Conditions and treatments
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="#">
          Our people
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
      <li class="hse-header__navigation-item">
        <a class="hse-header__navigation-link" href="#">
          Our research
          <svg class="hse-icon hse-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1.004 1.004 0 1 1-1.42-1.42l4.3-4.29-4.3-4.29a1.004 1.004 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71Z" />
          </svg>
        </a>
      </li>
    </ul>
  </nav>

</header>
Close organisational white header code
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 organisational white 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 organisational white header code 
{% from 'header/macro.njk' import header %}

{{ header({
    "showNav": "true",
    "showSearch": "true",
    "classes": "hse-header--white",
    "organisation": {
      "name": "Anytown Anyplace",
      "split": "Anywhere",
      "descriptor": "HSE Foundation Trust"
    },
    "primaryLinks": [
      {
        "url"  : "#",
        "label" : "Your hospital visit"
      },
      {
        'url' : '#',
        'label' : 'Wards and departments'
      },
      {
        'url'  : '#',
        'label' : 'Conditions and treatments'
      },
      {
        'url'  : '#',
        'label' : 'Our people'
      },
      {
        'url' : '#',
        'label' : 'Our research'
      }
    ]
  })
}}
Close organisational white header code

The organisational logo is an SVG and you can change the organisation name and descriptor in the code. Longer organisation names should be split onto 2 lines.

You can also use a static asset, such as a PNG file.

<a class="hse-header__link" href="/" aria-label="Anyplace Anytown Anywhere HSE Foundation Trust homepage">
  <img class="hse-org-logo" src="/path-to-assets/logo.png" alt="">
</a>

Updated: August 2020