Components

Header (web)

Use the header at the top of every web browser page, to show users they are using NHS App services.

How to use

We extend the NHS design system header with added nhsapp-u-hide-from-tablet and nhsapp-u-hide-until-tablet modifier classes to show and hide nav items.

Header (logged in)

Open this example (Header (web) logged in) in a new tab 
<header class="nhsuk-header" data-module="nhsuk-header" role="banner">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <a class="nhsuk-header__service-logo" href="#" aria-label="NHS homepage">
        <svg
          class="nhsuk-header__logo"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 200 80"
          height="40"
          width="100"
          focusable="false"
          role="img"
          aria-label="NHS"
        >
          <title>NHS</title>
          <path
            fill="currentcolor"
            d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z"
          />
        </svg>
        <span class="nhsuk-header__service-name"
          >App<span class="nhsuk-u-visually-hidden"> homepage</span></span
        >
      </a>
    </div>
    <nav
      class="nhsuk-header__account nhsapp-u-hide-until-tablet"
      aria-label="Account"
    >
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#"> App help </a>
        </li>
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#"> Log out </a>
        </li>
      </ul>
    </nav>
  </div>
  <nav class="nhsuk-header__navigation" aria-label="Menu">
    <div class="nhsuk-header__navigation-container nhsuk-width-container">
      <ul class="nhsuk-header__navigation-list">
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Home</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Messages</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Profile</a>
        </li>
        <li class="nhsuk-header__navigation-item nhsapp-u-hide-from-tablet">
          <a class="nhsuk-header__navigation-link" href="#">App help</a>
        </li>
        <li class="nhsuk-header__navigation-item nhsapp-u-hide-from-tablet">
          <a class="nhsuk-header__navigation-link" href="#">Log out</a>
        </li>
        <li class="nhsuk-header__menu" hidden>
          <button
            class="nhsuk-header__menu-toggle nhsuk-header__navigation-link"
            id="toggle-menu"
            aria-expanded="false"
          >
            <span class="nhsuk-u-visually-hidden">Browse </span>More
          </button>
        </li>
      </ul>
    </div>
  </nav>
</header>


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

{{ header({
  service: {
    text: 'App<span class="nhsuk-u-visually-hidden"> homepage</span>' | safe,
    href: '#'
  },
  account: {
    classes: 'nhsapp-u-hide-until-tablet',
    items: [
      {
        text: 'App help',
        href: '#'
      },
      {
        text: 'Log out',
        href: '#'
      }
    ]
  },
  navigation: {
    items: [
      {
        text: 'Home',
        href: '#'
      },
      {
        text: 'Messages',
        href: '#'
      },
      {
        text: 'Profile',
        href: '#'
      },
      {
        text: 'App help',
        href: '#',
        classes: 'nhsapp-u-hide-from-tablet'
      },
      {
        text: 'Log out',
        href: '#',
        classes: 'nhsapp-u-hide-from-tablet'
      }
    ]
  }
}) }}

Header (logged out)

Open this example (Header (web) not logged in) in a new tab 
<header class="nhsuk-header" data-module="nhsuk-header" role="banner">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <a class="nhsuk-header__service-logo" href="#" aria-label="NHS homepage">
        <svg
          class="nhsuk-header__logo"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 200 80"
          height="40"
          width="100"
          focusable="false"
          role="img"
          aria-label="NHS"
        >
          <title>NHS</title>
          <path
            fill="currentcolor"
            d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z"
          />
        </svg>
        <span class="nhsuk-header__service-name"
          >App<span class="nhsuk-u-visually-hidden"> homepage</span></span
        >
      </a>
    </div>
  </div>
</header>


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

{{ header({
  service: {
    text: 'App<span class="nhsuk-u-visually-hidden"> homepage</span>' | safe,
    href: '#'
  }
}) }}

Help improve this component

The NHS App design system team would like to hear:

  • how you have used this component in your service
  • any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the 'Header (web)' discussion on GitHub.