Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Header

These examples are used for automated tests and may not follow service manual best practice.

Header default

Open this example in a new tab: Header default

Code

Markup

<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 Digital service manual 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">Digital service manual</span>
      </a>
    </div>
    <search class="nhsuk-header__search">
      <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" novalidate>
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-u-visually-hidden" for="search-field">
            Search the NHS digital service manual
          </label>
          <div class="nhsuk-input-wrapper">
            <input class="nhsuk-input" id="search-field" name="q" type="search" autocomplete="off" placeholder="Search">
            <button class="nhsuk-button nhsuk-button--small" data-module="nhsuk-button" type="submit">
              <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
                <title>Search</title>
                <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
              </svg>
            </button>
          </div>
        </div>
      </form>
    </search>
  </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="#">NHS service standard</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Design system</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Content guide</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Accessibility</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Community and contribution</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  service: {
    text: "Digital service manual",
    href: "#"
  },
  search: {
    placeholder: "Search",
    visuallyHiddenLabel: "Search the NHS digital service manual"
  },
  navigation: {
    items: [
      {
        text: "NHS service standard",
        href: "#"
      },
      {
        text: "Design system",
        href: "#"
      },
      {
        text: "Content guide",
        href: "#"
      },
      {
        text: "Accessibility",
        href: "#"
      },
      {
        text: "Community and contribution",
        href: "#"
      }
    ]
  }
}) }}

Header white linked logo, custom

Open this example in a new tab: Header white linked logo, custom

Code

Markup

<header class="nhsuk-header nhsuk-header--white" 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="Great Ormond Street Hospital for Children, NHS Foundation Trust homepage">
        <img class="nhsuk-header__organisation-logo" src="/nhsuk-frontend/assets/example-logo.svg" width="280" alt="Great Ormond Street Hospital for Children, NHS Foundation Trust">
      </a>
    </div>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  colour: "white",
  logo: {
    href: "#",
    src: "/nhsuk-frontend/assets/example-logo.svg",
    alt: "Great Ormond Street Hospital for Children, NHS Foundation Trust"
  }
}) }}

Header blue with account inline (logged in)

Open this example in a new tab: Header blue with account inline (logged in)

Code

Markup

<header class="nhsuk-header nhsuk-header--inline" 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>
      </a>
    </div>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            <svg class="nhsuk-icon nhsuk-icon--user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
              <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"/>
            </svg>
            Account
          </a>
        </li>
        <li class="nhsuk-header__account-item">
          <form class="nhsuk-header__account-form" action="#" method="post" novalidate>
            <button class="nhsuk-header__account-button">
              Log out
            </button>
          </form>
        </li>
      </ul>
    </nav>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  inline: true,
  logo: {
    href: "#"
  },
  account: {
    items: [
      {
        href: "#",
        text: "Account",
        icon: true
      },
      {
        action: "#",
        text: "Log out"
      }
    ]
  }
}) }}

Header white with account inline (logged in)

Open this example in a new tab: Header white with account inline (logged in)

Code

Markup

<header class="nhsuk-header nhsuk-header--white nhsuk-header--inline" 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>
      </a>
    </div>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            <svg class="nhsuk-icon nhsuk-icon--user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
              <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"/>
            </svg>
            Account
          </a>
        </li>
        <li class="nhsuk-header__account-item">
          <form class="nhsuk-header__account-form" action="#" method="post" novalidate>
            <button class="nhsuk-header__account-button">
              Log out
            </button>
          </form>
        </li>
      </ul>
    </nav>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  inline: true,
  logo: {
    href: "#"
  },
  account: {
    items: [
      {
        href: "#",
        text: "Account",
        icon: true
      },
      {
        action: "#",
        text: "Log out"
      }
    ]
  },
  colour: "white"
}) }}

Header blue with account inline (logged out)

Open this example in a new tab: Header blue with account inline (logged out)

Code

Markup

<header class="nhsuk-header nhsuk-header--inline" 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>
      </a>
    </div>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            Log in
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  inline: true,
  logo: {
    href: "#"
  },
  account: {
    items: [
      {
        href: "#",
        text: "Log in"
      }
    ]
  }
}) }}

Header white with account inline (logged out)

Open this example in a new tab: Header white with account inline (logged out)

Code

Markup

<header class="nhsuk-header nhsuk-header--white nhsuk-header--inline" 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>
      </a>
    </div>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            Log in
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  inline: true,
  logo: {
    href: "#"
  },
  account: {
    items: [
      {
        href: "#",
        text: "Log in"
      }
    ]
  },
  colour: "white"
}) }}

Header blue with account (logged in)

Open this example in a new tab: Header blue with account (logged in)

Code

Markup

<header class="nhsuk-header" data-module="nhsuk-header" role="banner">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <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>
    </div>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            <svg class="nhsuk-icon nhsuk-icon--user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
              <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"/>
            </svg>
            florence.nightingale@nhs.net
          </a>
        </li>
        <li class="nhsuk-header__account-item">
          <form class="nhsuk-header__account-form" action="#" method="post" novalidate>
            <button class="nhsuk-header__account-button">
              Log out
            </button>
          </form>
        </li>
      </ul>
    </nav>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  account: {
    items: [
      {
        href: "#",
        text: "florence.nightingale@nhs.net",
        icon: true
      },
      {
        action: "#",
        text: "Log out"
      }
    ]
  }
}) }}

Header white with account (logged in)

Open this example in a new tab: Header white with account (logged in)

Code

Markup

<header class="nhsuk-header nhsuk-header--white" data-module="nhsuk-header" role="banner">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <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>
    </div>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            <svg class="nhsuk-icon nhsuk-icon--user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
              <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"/>
            </svg>
            florence.nightingale@nhs.net
          </a>
        </li>
        <li class="nhsuk-header__account-item">
          <form class="nhsuk-header__account-form" action="#" method="post" novalidate>
            <button class="nhsuk-header__account-button">
              Log out
            </button>
          </form>
        </li>
      </ul>
    </nav>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  account: {
    items: [
      {
        href: "#",
        text: "florence.nightingale@nhs.net",
        icon: true
      },
      {
        action: "#",
        text: "Log out"
      }
    ]
  },
  colour: "white"
}) }}

Header blue with account (logged out)

Open this example in a new tab: Header blue with account (logged out)

Code

Markup

<header class="nhsuk-header" data-module="nhsuk-header" role="banner">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <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>
    </div>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            Log in
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  account: {
    items: [
      {
        href: "#",
        text: "Log in"
      }
    ]
  }
}) }}

Header white with account (logged out)

Open this example in a new tab: Header white with account (logged out)

Code

Markup

<header class="nhsuk-header nhsuk-header--white" data-module="nhsuk-header" role="banner">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <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>
    </div>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            Log in
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  account: {
    items: [
      {
        href: "#",
        text: "Log in"
      }
    ]
  },
  colour: "white"
}) }}

Header blue with navigation

Open this example in a new tab: Header blue with navigation

Code

Markup

<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>
      </a>
    </div>
  </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="#">Health A to Z</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Live Well</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Mental health</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Care and support</a>
        </li>
        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--current">
          <a class="nhsuk-header__navigation-link" href="#" aria-current="true"><strong class="nhsuk-header__navigation-item-current-fallback">Pregnancy</strong></a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">NHS services</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  navigation: {
    items: [
      {
        href: "#",
        text: "Health A to Z"
      },
      {
        href: "#",
        text: "Live Well"
      },
      {
        href: "#",
        text: "Mental health"
      },
      {
        href: "#",
        text: "Care and support"
      },
      {
        href: "#",
        text: "Pregnancy",
        active: true
      },
      {
        href: "#",
        text: "NHS services"
      }
    ]
  }
}) }}

Header white with navigation

Open this example in a new tab: Header white with navigation

Code

Markup

<header class="nhsuk-header nhsuk-header--white" 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>
      </a>
    </div>
  </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="#">Health A to Z</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Live Well</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Mental health</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Care and support</a>
        </li>
        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--current">
          <a class="nhsuk-header__navigation-link" href="#" aria-current="true"><strong class="nhsuk-header__navigation-item-current-fallback">Pregnancy</strong></a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">NHS services</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  navigation: {
    items: [
      {
        href: "#",
        text: "Health A to Z"
      },
      {
        href: "#",
        text: "Live Well"
      },
      {
        href: "#",
        text: "Mental health"
      },
      {
        href: "#",
        text: "Care and support"
      },
      {
        href: "#",
        text: "Pregnancy",
        active: true
      },
      {
        href: "#",
        text: "NHS services"
      }
    ]
  },
  colour: "white"
}) }}

Header blue with navigation (empty items)

Open this example in a new tab: Header blue with navigation (empty items)

Code

Markup

<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>
      </a>
    </div>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            <svg class="nhsuk-icon nhsuk-icon--user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
              <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"/>
            </svg>
            Account
          </a>
        </li>
        <li class="nhsuk-header__account-item">
          <form class="nhsuk-header__account-form" action="#" method="post" novalidate>
            <button class="nhsuk-header__account-button">
              Log out
            </button>
          </form>
        </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="/">Reports</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  account: {
    items: [
      {
        href: "#",
        text: "Account",
        icon: true
      },
      false,
      false,
      false,
      {
        action: "#",
        text: "Log out"
      }
    ]
  },
  navigation: {
    items: [
      {
        text: "Home",
        href: "/"
      },
      false,
      false,
      false,
      {
        text: "Reports",
        href: "/"
      }
    ]
  }
}) }}

Header white with navigation (empty items)

Open this example in a new tab: Header white with navigation (empty items)

Code

Markup

<header class="nhsuk-header nhsuk-header--white" 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>
      </a>
    </div>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            <svg class="nhsuk-icon nhsuk-icon--user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
              <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"/>
            </svg>
            Account
          </a>
        </li>
        <li class="nhsuk-header__account-item">
          <form class="nhsuk-header__account-form" action="#" method="post" novalidate>
            <button class="nhsuk-header__account-button">
              Log out
            </button>
          </form>
        </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="/">Reports</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  account: {
    items: [
      {
        href: "#",
        text: "Account",
        icon: true
      },
      false,
      false,
      false,
      {
        action: "#",
        text: "Log out"
      }
    ]
  },
  navigation: {
    items: [
      {
        text: "Home",
        href: "/"
      },
      false,
      false,
      false,
      {
        text: "Reports",
        href: "/"
      }
    ]
  },
  colour: "white"
}) }}

Header blue with navigation (justified)

Open this example in a new tab: Header blue with navigation (justified)

Code

Markup

<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>
      </a>
    </div>
  </div>
  <nav class="nhsuk-header__navigation nhsuk-header__navigation--justified" 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="#">Health A to Z</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Live Well</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Mental health</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Care and support</a>
        </li>
        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--current">
          <a class="nhsuk-header__navigation-link" href="#" aria-current="true"><strong class="nhsuk-header__navigation-item-current-fallback">Pregnancy</strong></a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">NHS services</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  navigation: {
    justified: true,
    items: [
      {
        href: "#",
        text: "Health A to Z"
      },
      {
        href: "#",
        text: "Live Well"
      },
      {
        href: "#",
        text: "Mental health"
      },
      {
        href: "#",
        text: "Care and support"
      },
      {
        href: "#",
        text: "Pregnancy",
        active: true
      },
      {
        href: "#",
        text: "NHS services"
      }
    ]
  }
}) }}

Header white with navigation (justified)

Open this example in a new tab: Header white with navigation (justified)

Code

Markup

<header class="nhsuk-header nhsuk-header--white" 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>
      </a>
    </div>
  </div>
  <nav class="nhsuk-header__navigation nhsuk-header__navigation--justified" 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="#">Health A to Z</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Live Well</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Mental health</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Care and support</a>
        </li>
        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--current">
          <a class="nhsuk-header__navigation-link" href="#" aria-current="true"><strong class="nhsuk-header__navigation-item-current-fallback">Pregnancy</strong></a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">NHS services</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  navigation: {
    justified: true,
    items: [
      {
        href: "#",
        text: "Health A to Z"
      },
      {
        href: "#",
        text: "Live Well"
      },
      {
        href: "#",
        text: "Mental health"
      },
      {
        href: "#",
        text: "Care and support"
      },
      {
        href: "#",
        text: "Pregnancy",
        active: true
      },
      {
        href: "#",
        text: "NHS services"
      }
    ]
  },
  colour: "white"
}) }}

Header blue with navigation (overflow)

Open this example in a new tab: Header blue with navigation (overflow)

Code

Markup

<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 Digital service manual 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">Digital service manual</span>
      </a>
    </div>
    <search class="nhsuk-header__search">
      <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" novalidate>
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-u-visually-hidden" for="search-field">
            Search the NHS digital service manual
          </label>
          <div class="nhsuk-input-wrapper">
            <input class="nhsuk-input" id="search-field" name="q" type="search" autocomplete="off" placeholder="Search">
            <button class="nhsuk-button nhsuk-button--small" data-module="nhsuk-button" type="submit">
              <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
                <title>Search</title>
                <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
              </svg>
            </button>
          </div>
        </div>
      </form>
    </search>
  </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="#">Health A to Z</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Live Well</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Mental health</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Care and support</a>
        </li>
        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--current">
          <a class="nhsuk-header__navigation-link" href="#" aria-current="true"><strong class="nhsuk-header__navigation-item-current-fallback">Pregnancy</strong></a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">NHS services</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Another item #1</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Another item #2</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  service: {
    text: "Digital service manual",
    href: "#"
  },
  search: {
    placeholder: "Search",
    visuallyHiddenLabel: "Search the NHS digital service manual"
  },
  navigation: {
    items: [
      {
        href: "#",
        text: "Health A to Z"
      },
      {
        href: "#",
        text: "Live Well"
      },
      {
        href: "#",
        text: "Mental health"
      },
      {
        href: "#",
        text: "Care and support"
      },
      {
        href: "#",
        text: "Pregnancy",
        active: true
      },
      {
        href: "#",
        text: "NHS services"
      },
      {
        href: "#",
        text: "Another item #1"
      },
      {
        href: "#",
        text: "Another item #2"
      }
    ]
  }
}) }}

Header white with navigation (overflow)

Open this example in a new tab: Header white with navigation (overflow)

Code

Markup

<header class="nhsuk-header nhsuk-header--white" 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 Digital service manual 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">Digital service manual</span>
      </a>
    </div>
    <search class="nhsuk-header__search">
      <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" novalidate>
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-u-visually-hidden" for="search-field">
            Search the NHS digital service manual
          </label>
          <div class="nhsuk-input-wrapper">
            <input class="nhsuk-input" id="search-field" name="q" type="search" autocomplete="off" placeholder="Search">
            <button class="nhsuk-button nhsuk-button--small" data-module="nhsuk-button" type="submit">
              <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
                <title>Search</title>
                <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
              </svg>
            </button>
          </div>
        </div>
      </form>
    </search>
  </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="#">Health A to Z</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Live Well</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Mental health</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Care and support</a>
        </li>
        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--current">
          <a class="nhsuk-header__navigation-link" href="#" aria-current="true"><strong class="nhsuk-header__navigation-item-current-fallback">Pregnancy</strong></a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">NHS services</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Another item #1</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Another item #2</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  service: {
    text: "Digital service manual",
    href: "#"
  },
  search: {
    placeholder: "Search",
    visuallyHiddenLabel: "Search the NHS digital service manual"
  },
  navigation: {
    items: [
      {
        href: "#",
        text: "Health A to Z"
      },
      {
        href: "#",
        text: "Live Well"
      },
      {
        href: "#",
        text: "Mental health"
      },
      {
        href: "#",
        text: "Care and support"
      },
      {
        href: "#",
        text: "Pregnancy",
        active: true
      },
      {
        href: "#",
        text: "NHS services"
      },
      {
        href: "#",
        text: "Another item #1"
      },
      {
        href: "#",
        text: "Another item #2"
      }
    ]
  },
  colour: "white"
}) }}

Header blue with navigation (overflow, white)

Open this example in a new tab: Header blue with navigation (overflow, white)

Code

Markup

<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 Digital service manual 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">Digital service manual</span>
      </a>
    </div>
    <search class="nhsuk-header__search">
      <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" novalidate>
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-u-visually-hidden" for="search-field">
            Search the NHS digital service manual
          </label>
          <div class="nhsuk-input-wrapper">
            <input class="nhsuk-input" id="search-field" name="q" type="search" autocomplete="off" placeholder="Search">
            <button class="nhsuk-button nhsuk-button--small" data-module="nhsuk-button" type="submit">
              <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
                <title>Search</title>
                <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
              </svg>
            </button>
          </div>
        </div>
      </form>
    </search>
  </div>
  <nav class="nhsuk-header__navigation nhsuk-header__navigation--white" 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="#">Health A to Z</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Live Well</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Mental health</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Care and support</a>
        </li>
        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--current">
          <a class="nhsuk-header__navigation-link" href="#" aria-current="true"><strong class="nhsuk-header__navigation-item-current-fallback">Pregnancy</strong></a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">NHS services</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Another item #1</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Another item #2</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  service: {
    text: "Digital service manual",
    href: "#"
  },
  search: {
    placeholder: "Search",
    visuallyHiddenLabel: "Search the NHS digital service manual"
  },
  navigation: {
    colour: "white",
    items: [
      {
        href: "#",
        text: "Health A to Z"
      },
      {
        href: "#",
        text: "Live Well"
      },
      {
        href: "#",
        text: "Mental health"
      },
      {
        href: "#",
        text: "Care and support"
      },
      {
        href: "#",
        text: "Pregnancy",
        active: true
      },
      {
        href: "#",
        text: "NHS services"
      },
      {
        href: "#",
        text: "Another item #1"
      },
      {
        href: "#",
        text: "Another item #2"
      }
    ]
  }
}) }}

Header white with navigation (overflow, white)

Open this example in a new tab: Header white with navigation (overflow, white)

Code

Markup

<header class="nhsuk-header nhsuk-header--white" 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 Digital service manual 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">Digital service manual</span>
      </a>
    </div>
    <search class="nhsuk-header__search">
      <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" novalidate>
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-u-visually-hidden" for="search-field">
            Search the NHS digital service manual
          </label>
          <div class="nhsuk-input-wrapper">
            <input class="nhsuk-input" id="search-field" name="q" type="search" autocomplete="off" placeholder="Search">
            <button class="nhsuk-button nhsuk-button--small" data-module="nhsuk-button" type="submit">
              <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
                <title>Search</title>
                <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
              </svg>
            </button>
          </div>
        </div>
      </form>
    </search>
  </div>
  <nav class="nhsuk-header__navigation nhsuk-header__navigation--white" 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="#">Health A to Z</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Live Well</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Mental health</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Care and support</a>
        </li>
        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--current">
          <a class="nhsuk-header__navigation-link" href="#" aria-current="true"><strong class="nhsuk-header__navigation-item-current-fallback">Pregnancy</strong></a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">NHS services</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Another item #1</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Another item #2</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  service: {
    text: "Digital service manual",
    href: "#"
  },
  search: {
    placeholder: "Search",
    visuallyHiddenLabel: "Search the NHS digital service manual"
  },
  navigation: {
    colour: "white",
    items: [
      {
        href: "#",
        text: "Health A to Z"
      },
      {
        href: "#",
        text: "Live Well"
      },
      {
        href: "#",
        text: "Mental health"
      },
      {
        href: "#",
        text: "Care and support"
      },
      {
        href: "#",
        text: "Pregnancy",
        active: true
      },
      {
        href: "#",
        text: "NHS services"
      },
      {
        href: "#",
        text: "Another item #1"
      },
      {
        href: "#",
        text: "Another item #2"
      }
    ]
  },
  colour: "white"
}) }}

Header blue with navigation (unlinked item)

Open this example in a new tab: Header blue with navigation (unlinked item)

Code

Markup

<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>
      </a>
    </div>
  </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="#">Health A to Z</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Live Well</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Mental health</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Care and support</a>
        </li>
        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--current">
          <span class="nhsuk-header__navigation-text" aria-current="page"><strong class="nhsuk-header__navigation-item-current-fallback">Pregnancy</strong></span>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">NHS services</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  navigation: {
    items: [
      {
        href: "#",
        text: "Health A to Z"
      },
      {
        href: "#",
        text: "Live Well"
      },
      {
        href: "#",
        text: "Mental health"
      },
      {
        href: "#",
        text: "Care and support"
      },
      {
        text: "Pregnancy",
        current: true
      },
      {
        href: "#",
        text: "NHS services"
      }
    ]
  }
}) }}

Header white with navigation (unlinked item)

Open this example in a new tab: Header white with navigation (unlinked item)

Code

Markup

<header class="nhsuk-header nhsuk-header--white" 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>
      </a>
    </div>
  </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="#">Health A to Z</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Live Well</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Mental health</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Care and support</a>
        </li>
        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--current">
          <span class="nhsuk-header__navigation-text" aria-current="page"><strong class="nhsuk-header__navigation-item-current-fallback">Pregnancy</strong></span>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">NHS services</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  navigation: {
    items: [
      {
        href: "#",
        text: "Health A to Z"
      },
      {
        href: "#",
        text: "Live Well"
      },
      {
        href: "#",
        text: "Mental health"
      },
      {
        href: "#",
        text: "Care and support"
      },
      {
        text: "Pregnancy",
        current: true
      },
      {
        href: "#",
        text: "NHS services"
      }
    ]
  },
  colour: "white"
}) }}

Header blue with organisation name

Open this example in a new tab: Header blue with organisation name

Code

Markup

<header class="nhsuk-header nhsuk-header--organisation" 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 Business Services Authority 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__organisation-name">Business Services Authority</span>
      </a>
    </div>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  organisation: {
    name: "Business Services Authority"
  }
}) }}

Header white with organisation name

Open this example in a new tab: Header white with organisation name

Code

Markup

<header class="nhsuk-header nhsuk-header--white nhsuk-header--organisation" 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 Business Services Authority 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__organisation-name">Business Services Authority</span>
      </a>
    </div>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  organisation: {
    name: "Business Services Authority"
  },
  colour: "white"
}) }}

Header blue with organisation name (and descriptor)

Open this example in a new tab: Header blue with organisation name (and descriptor)

Code

Markup

<header class="nhsuk-header nhsuk-header--organisation" 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 Anytown Anyplace Anywhere 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__organisation-name">Anytown Anyplace Anywhere</span><span class="nhsuk-header__organisation-name-descriptor">NHS Foundation Trust</span>
      </a>
    </div>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  organisation: {
    name: "Anytown Anyplace Anywhere",
    descriptor: "NHS Foundation Trust"
  }
}) }}

Header white with organisation name (and descriptor)

Open this example in a new tab: Header white with organisation name (and descriptor)

Code

Markup

<header class="nhsuk-header nhsuk-header--white nhsuk-header--organisation" 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 Anytown Anyplace Anywhere 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__organisation-name">Anytown Anyplace Anywhere</span><span class="nhsuk-header__organisation-name-descriptor">NHS Foundation Trust</span>
      </a>
    </div>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  organisation: {
    name: "Anytown Anyplace Anywhere",
    descriptor: "NHS Foundation Trust"
  },
  colour: "white"
}) }}

Header blue with organisation name (split with descriptor)

Open this example in a new tab: Header blue with organisation name (split with descriptor)

Code

Markup

<header class="nhsuk-header nhsuk-header--organisation" 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 Anytown Anyplace Anywhere 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__organisation-name">Anytown Anyplace <span class="nhsuk-header__organisation-name-split">Anywhere</span></span><span class="nhsuk-header__organisation-name-descriptor">NHS Foundation Trust</span>
      </a>
    </div>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  organisation: {
    name: "Anytown Anyplace",
    split: "Anywhere",
    descriptor: "NHS Foundation Trust"
  }
}) }}

Header white with organisation name (split with descriptor)

Open this example in a new tab: Header white with organisation name (split with descriptor)

Code

Markup

<header class="nhsuk-header nhsuk-header--white nhsuk-header--organisation" 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 Anytown Anyplace Anywhere 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__organisation-name">Anytown Anyplace <span class="nhsuk-header__organisation-name-split">Anywhere</span></span><span class="nhsuk-header__organisation-name-descriptor">NHS Foundation Trust</span>
      </a>
    </div>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  organisation: {
    name: "Anytown Anyplace",
    split: "Anywhere",
    descriptor: "NHS Foundation Trust"
  },
  colour: "white"
}) }}

Header blue with search inline

Open this example in a new tab: Header blue with search inline

Code

Markup

<header class="nhsuk-header nhsuk-header--inline" data-module="nhsuk-header" role="banner">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <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>
    </div>
    <search class="nhsuk-header__search">
      <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" novalidate>
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-u-visually-hidden" for="search-field">
            Search the NHS website
          </label>
          <div class="nhsuk-input-wrapper">
            <input class="nhsuk-input" id="search-field" name="q" type="search" autocomplete="off" placeholder="Search">
            <button class="nhsuk-button nhsuk-button--small" data-module="nhsuk-button" type="submit">
              <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
                <title>Search</title>
                <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
              </svg>
            </button>
          </div>
        </div>
      </form>
    </search>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  inline: true,
  search: true
}) }}

Header white with search inline

Open this example in a new tab: Header white with search inline

Code

Markup

<header class="nhsuk-header nhsuk-header--white nhsuk-header--inline" data-module="nhsuk-header" role="banner">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <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>
    </div>
    <search class="nhsuk-header__search">
      <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" novalidate>
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-u-visually-hidden" for="search-field">
            Search the NHS website
          </label>
          <div class="nhsuk-input-wrapper">
            <input class="nhsuk-input" id="search-field" name="q" type="search" autocomplete="off" placeholder="Search">
            <button class="nhsuk-button nhsuk-button--small" data-module="nhsuk-button" type="submit">
              <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
                <title>Search</title>
                <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
              </svg>
            </button>
          </div>
        </div>
      </form>
    </search>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  inline: true,
  search: true,
  colour: "white"
}) }}

Header blue with service name

Open this example in a new tab: Header blue with service name

Code

Markup

<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>
      </a>
      <span class="nhsuk-header__service-name">Find your NHS number</span>
    </div>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  service: {
    text: "Find your NHS number"
  }
}) }}

Header white with service name

Open this example in a new tab: Header white with service name

Code

Markup

<header class="nhsuk-header nhsuk-header--white" 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>
      </a>
      <span class="nhsuk-header__service-name">Find your NHS number</span>
    </div>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#"
  },
  service: {
    text: "Find your NHS number"
  },
  colour: "white"
}) }}

Header blue with service name, account inline (logged in)

Open this example in a new tab: Header blue with service name, account inline (logged in)

Code

Markup

<header class="nhsuk-header nhsuk-header--inline" 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 Get a self-test kit for HIV 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">Get a self-test kit for HIV</span>
      </a>
    </div>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <form class="nhsuk-header__account-form" action="#" method="post" novalidate>
            <button class="nhsuk-header__account-button">
              Log out
            </button>
          </form>
        </li>
      </ul>
    </nav>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  inline: true,
  service: {
    text: "Get a self-test kit for HIV",
    href: "#"
  },
  account: {
    items: [
      {
        action: "#",
        text: "Log out"
      }
    ]
  }
}) }}

Header white with service name, account inline (logged in)

Open this example in a new tab: Header white with service name, account inline (logged in)

Code

Markup

<header class="nhsuk-header nhsuk-header--white nhsuk-header--inline" 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 Get a self-test kit for HIV 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">Get a self-test kit for HIV</span>
      </a>
    </div>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <form class="nhsuk-header__account-form" action="#" method="post" novalidate>
            <button class="nhsuk-header__account-button">
              Log out
            </button>
          </form>
        </li>
      </ul>
    </nav>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  inline: true,
  service: {
    text: "Get a self-test kit for HIV",
    href: "#"
  },
  account: {
    items: [
      {
        action: "#",
        text: "Log out"
      }
    ]
  },
  colour: "white"
}) }}

Header blue with service name, account inline (logged out)

Open this example in a new tab: Header blue with service name, account inline (logged out)

Code

Markup

<header class="nhsuk-header nhsuk-header--inline" 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 Get a self-test kit for HIV 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">Get a self-test kit for HIV</span>
      </a>
    </div>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <form class="nhsuk-header__account-form" action="#" method="post" novalidate>
            <button class="nhsuk-header__account-button">
              Log in
            </button>
          </form>
        </li>
      </ul>
    </nav>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  inline: true,
  service: {
    text: "Get a self-test kit for HIV",
    href: "#"
  },
  account: {
    items: [
      {
        action: "#",
        text: "Log in"
      }
    ]
  }
}) }}

Header white with service name, account inline (logged out)

Open this example in a new tab: Header white with service name, account inline (logged out)

Code

Markup

<header class="nhsuk-header nhsuk-header--white nhsuk-header--inline" 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 Get a self-test kit for HIV 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">Get a self-test kit for HIV</span>
      </a>
    </div>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <form class="nhsuk-header__account-form" action="#" method="post" novalidate>
            <button class="nhsuk-header__account-button">
              Log in
            </button>
          </form>
        </li>
      </ul>
    </nav>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  inline: true,
  service: {
    text: "Get a self-test kit for HIV",
    href: "#"
  },
  account: {
    items: [
      {
        action: "#",
        text: "Log in"
      }
    ]
  },
  colour: "white"
}) }}

Header blue with service name (linked)

Open this example in a new tab: Header blue with service name (linked)

Code

Markup

<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="#nhs" 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>
      </a>
      <a class="nhsuk-header__service-name" href="#">Find your NHS number</a>
      
    </div>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#nhs"
  },
  service: {
    text: "Find your NHS number",
    href: "#"
  }
}) }}

Header white with service name (linked)

Open this example in a new tab: Header white with service name (linked)

Code

Markup

<header class="nhsuk-header nhsuk-header--white" 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="#nhs" 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>
      </a>
      <a class="nhsuk-header__service-name" href="#">Find your NHS number</a>
      
    </div>
  </div>
</header>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  logo: {
    href: "#nhs"
  },
  service: {
    text: "Find your NHS number",
    href: "#"
  },
  colour: "white"
}) }}

Header blue with service name, search, account (logged in, complex), navigation

Open this example in a new tab: Header blue with service name, search, account (logged in, complex), navigation

Code

Markup

<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 Manage patients 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">Manage patients</span>
      </a>
    </div>
    <search class="nhsuk-header__search">
      <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" novalidate>
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-u-visually-hidden" for="search-field">
            Search patients by name or NHS number
          </label>
          <div class="nhsuk-input-wrapper">
            <input class="nhsuk-input" id="search-field" name="q" type="search" autocomplete="off" placeholder="Name or NHS number">
            <button class="nhsuk-button nhsuk-button--small" data-module="nhsuk-button" type="submit">
              <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
                <title>Search</title>
                <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
              </svg>
            </button>
          </div>
        </div>
      </form>
    </search>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            <svg class="nhsuk-icon nhsuk-icon--user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
              <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"/>
            </svg>
            Florence Nightingale
          </a>
        </li>
        <li class="nhsuk-header__account-item">
          Regional Manager, Hull and East Yorkshire Hospitals NHS Trust
        </li>
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            Change role
          </a>
        </li>
        <li class="nhsuk-header__account-item">
          <form class="nhsuk-header__account-form" action="#" method="post" novalidate>
            <button class="nhsuk-header__account-button">
              Log out
            </button>
          </form>
        </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="#">Create user</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Find user</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  service: {
    href: "#",
    text: "Manage patients"
  },
  search: {
    placeholder: "Name or NHS number",
    visuallyHiddenLabel: "Search patients by name or NHS number"
  },
  account: {
    items: [
      {
        href: "#",
        text: "Florence Nightingale",
        icon: true
      },
      {
        text: "Regional Manager, Hull and East Yorkshire Hospitals NHS Trust"
      },
      {
        href: "#",
        text: "Change role"
      },
      {
        action: "#",
        text: "Log out"
      }
    ]
  },
  navigation: {
    items: [
      {
        href: "#",
        text: "Home"
      },
      {
        href: "#",
        text: "Create user"
      },
      {
        href: "#",
        text: "Find user"
      }
    ]
  }
}) }}

Header white with service name, search, account (logged in, complex), navigation

Open this example in a new tab: Header white with service name, search, account (logged in, complex), navigation

Code

Markup

<header class="nhsuk-header nhsuk-header--white" 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 Manage patients 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">Manage patients</span>
      </a>
    </div>
    <search class="nhsuk-header__search">
      <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" novalidate>
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-u-visually-hidden" for="search-field">
            Search patients by name or NHS number
          </label>
          <div class="nhsuk-input-wrapper">
            <input class="nhsuk-input" id="search-field" name="q" type="search" autocomplete="off" placeholder="Name or NHS number">
            <button class="nhsuk-button nhsuk-button--small" data-module="nhsuk-button" type="submit">
              <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
                <title>Search</title>
                <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
              </svg>
            </button>
          </div>
        </div>
      </form>
    </search>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            <svg class="nhsuk-icon nhsuk-icon--user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
              <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"/>
            </svg>
            Florence Nightingale
          </a>
        </li>
        <li class="nhsuk-header__account-item">
          Regional Manager, Hull and East Yorkshire Hospitals NHS Trust
        </li>
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            Change role
          </a>
        </li>
        <li class="nhsuk-header__account-item">
          <form class="nhsuk-header__account-form" action="#" method="post" novalidate>
            <button class="nhsuk-header__account-button">
              Log out
            </button>
          </form>
        </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="#">Create user</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Find user</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  service: {
    href: "#",
    text: "Manage patients"
  },
  search: {
    placeholder: "Name or NHS number",
    visuallyHiddenLabel: "Search patients by name or NHS number"
  },
  account: {
    items: [
      {
        href: "#",
        text: "Florence Nightingale",
        icon: true
      },
      {
        text: "Regional Manager, Hull and East Yorkshire Hospitals NHS Trust"
      },
      {
        href: "#",
        text: "Change role"
      },
      {
        action: "#",
        text: "Log out"
      }
    ]
  },
  navigation: {
    items: [
      {
        href: "#",
        text: "Home"
      },
      {
        href: "#",
        text: "Create user"
      },
      {
        href: "#",
        text: "Find user"
      }
    ]
  },
  colour: "white"
}) }}

Header blue with service name, search, account, navigation

Open this example in a new tab: Header blue with service name, search, account, navigation

Code

Markup

<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 Search patient directory 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">Search patient directory</span>
      </a>
    </div>
    <search class="nhsuk-header__search">
      <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" novalidate>
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-u-visually-hidden" for="search-field">
            Search patients by name or NHS number
          </label>
          <div class="nhsuk-input-wrapper">
            <input class="nhsuk-input" id="search-field" name="q" type="search" autocomplete="off" placeholder="Name or NHS number">
            <button class="nhsuk-button nhsuk-button--small" data-module="nhsuk-button" type="submit">
              <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
                <title>Search</title>
                <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
              </svg>
            </button>
          </div>
        </div>
      </form>
    </search>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <svg class="nhsuk-icon nhsuk-icon--user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
            <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"/>
          </svg>
          Florence Nightingale
        </li>
        <li class="nhsuk-header__account-item">
          <form class="nhsuk-header__account-form" action="#" method="post" novalidate>
            <button class="nhsuk-header__account-button">
              Log out
            </button>
          </form>
        </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="#">Patient list</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Advanced search</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Help guides</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  service: {
    text: "Search patient directory",
    href: "#"
  },
  search: {
    placeholder: "Name or NHS number",
    visuallyHiddenLabel: "Search patients by name or NHS number"
  },
  account: {
    items: [
      {
        text: "Florence Nightingale",
        icon: true
      },
      {
        action: "#",
        text: "Log out"
      }
    ]
  },
  navigation: {
    items: [
      {
        href: "#",
        text: "Home"
      },
      {
        href: "#",
        text: "Patient list"
      },
      {
        href: "#",
        text: "Advanced search"
      },
      {
        href: "#",
        text: "Help guides"
      }
    ]
  }
}) }}

Header white with service name, search, account, navigation

Open this example in a new tab: Header white with service name, search, account, navigation

Code

Markup

<header class="nhsuk-header nhsuk-header--white" 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 Search patient directory 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">Search patient directory</span>
      </a>
    </div>
    <search class="nhsuk-header__search">
      <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" novalidate>
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-u-visually-hidden" for="search-field">
            Search patients by name or NHS number
          </label>
          <div class="nhsuk-input-wrapper">
            <input class="nhsuk-input" id="search-field" name="q" type="search" autocomplete="off" placeholder="Name or NHS number">
            <button class="nhsuk-button nhsuk-button--small" data-module="nhsuk-button" type="submit">
              <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
                <title>Search</title>
                <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
              </svg>
            </button>
          </div>
        </div>
      </form>
    </search>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <svg class="nhsuk-icon nhsuk-icon--user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
            <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"/>
          </svg>
          Florence Nightingale
        </li>
        <li class="nhsuk-header__account-item">
          <form class="nhsuk-header__account-form" action="#" method="post" novalidate>
            <button class="nhsuk-header__account-button">
              Log out
            </button>
          </form>
        </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="#">Patient list</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Advanced search</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Help guides</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>

Macro

{% from "header/macro.njk" import header -%}

{{ header({
  service: {
    text: "Search patient directory",
    href: "#"
  },
  search: {
    placeholder: "Name or NHS number",
    visuallyHiddenLabel: "Search patients by name or NHS number"
  },
  account: {
    items: [
      {
        text: "Florence Nightingale",
        icon: true
      },
      {
        action: "#",
        text: "Log out"
      }
    ]
  },
  navigation: {
    items: [
      {
        href: "#",
        text: "Home"
      },
      {
        href: "#",
        text: "Patient list"
      },
      {
        href: "#",
        text: "Advanced search"
      },
      {
        href: "#",
        text: "Help guides"
      }
    ]
  },
  colour: "white"
}) }}