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" role="banner" data-module="nhsuk-header">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <a class="nhsuk-header__service-logo" href="#">
        <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="#"> Help and support </a>
</li>


<li class="nhsuk-header__account-item">
<a class="nhsuk-header__account-link" href="#"> Account </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="#">Services</a>
</li>


<li class="nhsuk-header__navigation-item">
<a class="nhsuk-header__navigation-link" href="#">Your health</a>
</li>


<li class="nhsuk-header__navigation-item">
<a class="nhsuk-header__navigation-link" href="#">Messages</a>
</li>


<li class="nhsuk-header__navigation-item nhsapp-u-hide-from-tablet">
<a class="nhsuk-header__navigation-link" href="#">Help and support</a>
</li>


<li class="nhsuk-header__navigation-item nhsapp-u-hide-from-tablet">
<a class="nhsuk-header__navigation-link" href="#">Account</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: 'Help and support',
        href: '#'
      },
      {
        text: 'Account',
        href: '#'
      },
      {
        text: 'Log out',
        href: '#'
      }
    ]
  },
  navigation: {
    items: [
      {
        text: 'Home',
        href: '#'
      },
      {
        text: 'Services',
        href: '#'
      },
      {
        text: 'Your health',
        href: '#'
      },
      {
        text: 'Messages',
        href: '#'
      },
      {
        text: 'Help and support',
        href: '#',
        classes: 'nhsapp-u-hide-from-tablet'
      },
      {
        text: 'Account',
        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" role="banner" data-module="nhsuk-header">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <a class="nhsuk-header__service-logo" href="#">
        <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.