There is an update to the GOV.UK Prototype kit which may affect how your prototype works if you are not using the latest version. Contact #team-plat-ui on HMRC Slack (open in app) if you need more information or support.

Account header

The account header is used for services that are part of the personal tax account.

When to use

Use this pattern if your service is part of the personal tax account.

When not to use

Do not use this pattern if your service is not part of the personal tax account. Use the GOV.UK header instead.

How it works

The account header contains:

There are 2 ways to use the account header. You can use HTML or, if you are using Nunjucks or version 7 or later of the GOV.UK Prototype Kit, you can use the Nunjucks macro.

You need HMRC Frontend to use this pattern – find out how to install HMRC Frontend. If you use the HMRC Nunjucks macro, you must copy and paste the entire macro in to your code.

You can also use a layout designed for the account header. Change the first line of code to

{% extends "hmrc/layouts/account-header.html" %}
            <div class="app-cookie-banner">
  <div class="govuk-width-container">
    <p class="govuk-body">GOV.UK uses cookies to make the site simpler. <a class="govuk-link" href="https://www.gov.uk/help/cookies">Find out more about cookies</a></p>
  </div>
</div>

<header class="govuk-header hmrc-header  hmrc-header--with-additional-navigation" role="banner" data-module="header">
  <div class="govuk-header__container govuk-width-container">
    <div class="govuk-header__logo">
      <a href="/" class="govuk-header__link govuk-header__link--homepage">
        <span class="govuk-header__logotype">

          <svg role="presentation" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="32" width="36">
            <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>

            <image src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image"></image>
          </svg>
          <span class="govuk-header__logotype-text">
            GOV.UK
          </span>
        </span>
      </a>
    </div>

    <div class="govuk-header__content">
      <a href="/" class="govuk-header__link govuk-header__link--service-name">
        Service Name
      </a>

      <nav class="hmrc-language-select" aria-label="Choose a language">
        <ul class="govuk-list hmrc-language-select__items">
          <li class="govuk-header__navigation-item">
            <a aria-current="page" lang="en" hreflang="en" href="/hmrc-design-patterns/account-header/example/">English</a>
          </li>
          <li class="govuk-header__navigation-item">
            <a class="govuk-header__link" lang="cy" hreflang="cy" href="/hmrc-design-patterns/account-header/example-welsh/">Cymraeg</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>
<div class="govuk-width-container">
</div>

<div class="govuk-width-container">

  <!-- ACCOUNT MENU -->
  <nav id="secondary-nav" class="hmrc-account-menu" aria-label="Account" data-module="hmrc-account-menu">
    <a href="#home" class="hmrc-account-menu__link hmrc-account-menu__link--home hmrc-account-menu__link--active">
      <span class="hmrc-account-icon hmrc-account-icon--home">
        Account home </span>
    </a>

    <a href="#" class="hmrc-account-menu__link hmrc-account-menu__link--menu js-hidden js-visible" tabindex="-1" aria-hidden="true" aria-expanded="false">
      Account menu </a>

    <ul class="hmrc-account-menu__main js-hidden">
      <li class="hmrc-account-menu__link--back hidden" aria-hidden="true">
        <a href="#" tabindex="-1" class="hmrc-account-menu__link">
          Back
        </a>
      </li>

      <li>
        <a href="#messages" class="hmrc-account-menu__link">
          Messages<span class="hmrc-notification-badge">30</span>
        </a>
      </li>

      <li>
        <a href="#check-progress" class="hmrc-account-menu__link">
          Check progress </a>
      </li>

      <li>
        <a href="#subnav-your-account" id="account-menu__main-2" class="hmrc-account-menu__link hmrc-account-icon hmrc-account-menu__link--more" aria-haspopup="true" aria-owns="subnav-your-account">
          Your account </a>

        <div class="hmrc-subnav" id="subnav-your-account" role="navigation" aria-labelledby="account-menu__main-2" aria-label="Your account">
          <div class="govuk-grid-column-one-third hmrc-subnav__section">
            <p class="hmrc-subnav__section__heading">
              Paperless settings </p>

            <div>
              <a href="#paperless-settings">
                Manage your paperless settings </a>
            </div>
          </div>

          <div class="govuk-grid-column-one-third hmrc-subnav__section">
            <p class="hmrc-subnav__section__heading">
              Personal details </p>

            <div>
              <a href="#personal-details">
                Manage your personal details </a>
            </div>
          </div>
        </div>
      </li>

      <li>
        <a href="#sign-out" class="hmrc-account-menu__link">
          Sign out </a>
      </li>
    </ul>
  </nav>
  <!-- END ACCOUNT MENU -->

  <main class="govuk-main-wrapper " id="main-content" role="main">
  </main>
</div>
          
              <div class="app-cookie-banner">
  <div class="govuk-width-container">
    <p class="govuk-body">GOV.UK uses cookies to make the site simpler. <a class="govuk-link" href="https://www.gov.uk/help/cookies">Find out more about cookies</a></p>
  </div>
</div>

<header class="govuk-header hmrc-header  hmrc-header--with-additional-navigation" role="banner" data-module="header">
  <div class="govuk-header__container govuk-width-container">
    <div class="govuk-header__logo">
      <a href="/" class="govuk-header__link govuk-header__link--homepage">
        <span class="govuk-header__logotype">

          <svg role="presentation" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="32" width="36">
            <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>

            <image src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image"></image>
          </svg>
          <span class="govuk-header__logotype-text">
            GOV.UK
          </span>
        </span>
      </a>
    </div>

    <div class="govuk-header__content">
      <a href="/" class="govuk-header__link govuk-header__link--service-name">
        Enw&#39;r gwasanaeth
      </a>

      <nav class="hmrc-language-select" aria-label="Choose a language">
        <ul class="govuk-list hmrc-language-select__items">
          <li class="govuk-header__navigation-item">
            <a class="govuk-header__link" lang="en" hreflang="en" href="/hmrc-design-patterns/account-header/example/">English</a>
          </li>
          <li class="govuk-header__navigation-item">
            <a aria-current="page" lang="cy" hreflang="cy" href="/hmrc-design-patterns/account-header/example-welsh/">Cymraeg</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>
<div class="govuk-width-container">
</div>

<div class="govuk-width-container">

  <!-- ACCOUNT MENU -->
  <nav id="secondary-nav" class="hmrc-account-menu" aria-label="Account" data-module="hmrc-account-menu">
    <a href="#home" class="hmrc-account-menu__link hmrc-account-menu__link--home hmrc-account-menu__link--active">
      <span class="hmrc-account-icon hmrc-account-icon--home">
        Hafan y cyfrif </span>
    </a>

    <a href="#" class="hmrc-account-menu__link hmrc-account-menu__link--menu js-hidden js-visible" tabindex="-1" aria-hidden="true" aria-expanded="false">
      Dewislen y cyfrif </a>

    <ul class="hmrc-account-menu__main js-hidden">
      <li class="hmrc-account-menu__link--back hidden" aria-hidden="true">
        <a href="#" tabindex="-1" class="hmrc-account-menu__link">
          Back
        </a>
      </li>

      <li>
        <a href="#messages" class="hmrc-account-menu__link">
          Negeseuon<span class="hmrc-notification-badge">30</span>
        </a>
      </li>

      <li>
        <a href="#check-progress" class="hmrc-account-menu__link">
          Gwirio cynnydd </a>
      </li>

      <li>
        <a href="#subnav-your-account" id="account-menu__main-2" class="hmrc-account-menu__link hmrc-account-icon hmrc-account-menu__link--more" aria-haspopup="true" aria-owns="subnav-your-account">
          Eich cyfrif </a>

        <div class="hmrc-subnav" id="subnav-your-account" role="navigation" aria-labelledby="account-menu__main-2" aria-label="Your account">
          <div class="govuk-grid-column-one-third hmrc-subnav__section">
            <p class="hmrc-subnav__section__heading">
              Gosodiadau di-bapur </p>

            <div>
              <a href="#paperless-settings">
                Rheoli'ch gosodiadau di-bapur </a>
            </div>
          </div>

          <div class="govuk-grid-column-one-third hmrc-subnav__section">
            <p class="hmrc-subnav__section__heading">
              Manylion personol </p>

            <div>
              <a href="#personal-details">
                Rheoli'ch manylion personol </a>
            </div>
          </div>
        </div>
      </li>

      <li>
        <a href="#sign-out" class="hmrc-account-menu__link">
          Allgofnodi </a>
      </li>
    </ul>
  </nav>
  <!-- END ACCOUNT MENU -->

  <main class="govuk-main-wrapper " id="main-content" role="main">
  </main>
</div>
            
              {%
  set hmrcAccountHeader = {
    language: "en",
    serviceName: "Service Name",
    serviceUrl: "/",
    homepageUrl: "/",
    containerClasses: "govuk-width-container",
    classes: "",
    languageToggle: {
      en: {
        href: "/hmrc-design-patterns/account-header/example/"
      },
      cy: {
        href: "/hmrc-design-patterns/account-header/example-welsh/"
      }
    },
    accountHome: {
      href: "#home",
      active: true
    },
    messages: {
      href: "#messages",
      messageCount: "30"
    },
    checkProgress: {
      href: "#check-progress"
    },
    paperlessSettings: {
      href: "#paperless-settings"
    },
    personalDetails: {
      href: "#personal-details"
    },
    signOut: {
      href: "#sign-out"
    }
  }
%}
            
                {%
  set hmrcAccountHeader = {
    language: "cy",
    serviceName: "Enw'r gwasanaeth",
    serviceUrl: "/",
    homepageUrl: "/",
    containerClasses: "govuk-width-container",
    classes: "",
    languageToggle: {
      en: {
        href: "/hmrc-design-patterns/account-header/example/"
      },
      cy: {
        href: "/hmrc-design-patterns/account-header/example-welsh/"
      }
    },
    accountHome: {
      href: "#home",
      active: true
    },
    messages: {
      href: "#messages",
      messageCount: "30"
    },
    checkProgress: {
      href: "#check-progress"
    },
    paperlessSettings: {
      href: "#paperless-settings"
    },
    personalDetails: {
      href: "#personal-details"
    },
    signOut: {
      href: "#sign-out"
    }
  }
%}
              

Research

We need more research. If you have used the account header, get in touch to share your research findings.

Discuss the account header on GitHub