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:
- the GOV.UK cookie banner, with a link to HMRC cookie policy
- the GOV.UK header
- the account menu
- the Welsh language toggle, if your service is available in Welsh
<header role="banner">
<div class="govuk-header hmrc-header hmrc-header--with-additional-navigation" data-module="govuk-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>
</svg>
<!--[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
<![endif]-->
<span class="govuk-header__logotype-text">
GOV.UK
</span>
</span>
</a>
</div>
<div class="govuk-header__content">
<a href="/" class="hmrc-header__service-name hmrc-header__service-name--linked">
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="#" class="hmrc-account-menu__link">
Profile and settings </a>
</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="govuk-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>
</svg>
<!--[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
<![endif]-->
<span class="govuk-header__logotype-text">
GOV.UK
</span>
</span>
</a>
</div>
<div class="govuk-header__content">
<a href="/" class="hmrc-header__service-name hmrc-header__service-name--linked">
Enw'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="#" class="hmrc-account-menu__link">
Proffil a gosodiadau </a>
</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.