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

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 into your code.

The account header contains:

              <header role="banner">
  <div class="govuk-header hmrc-header  hmrc-header--with-additional-navigation" 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 aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="30" 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" xlink:href="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32"></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>
  </div>
</header>

<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>
            
                <header role="banner">
  <div class="govuk-header hmrc-header  hmrc-header--with-additional-navigation" 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 aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="30" 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" xlink:href="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32"></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>
  </div>
</header>

<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">
          Yn ôl </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"
    }
  }
%}
                

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

{% extends "hmrc/layouts/account-header.html" %}

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