Account header

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

When to use

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

When not to use

Do not use this component if your service is not part of the personal tax account. Use the HMRC header instead.

How it works

The account header contains:

  • the GOV.UK cookie banner, with a link to HMRC cookie policy
  • the GOV.UK header
  • the account menu
  • the language selector, if your service is available in Welsh
<!-- COOKIE MESSAGE -->
<div id="global-cookie-message" style="display: block;">
  <p>GOV.UK uses cookies to make the site simpler. <a href="https://www.gov.uk/help/cookies">Find out more about
    cookies</a></p>
</div>
<!-- END COOKIE MESSAGE -->
<!-- GOV.UK HEADER -->
<header role="banner" id="global-header" class="with-proposition">
  <div class="header-wrapper">
    <div class="header-global">
      <div class="header-logo">
        <a href="https://www.gov.uk" title="Go to the GOV.UK homepage" id="logo" class="content">
          <img src="public/assets/images/gov.uk_logotype_crown_invert_trans.png?0.19.2" width="36" height="32" alt="">GOV.UK</a>
      </div>
    </div>
    <div class="header-proposition">
      <div class="content">
        <nav id="proposition-menu">
          <a href="#" id="proposition-name">Personal tax account</a>
          <a href="#proposition-links" class="js-header-toggle menu">Menu</a>
          <!-- LANGUAGE TOGGLE -->
  <ul class="lang-select">
    <li>
      <span class="faded-text--small">
        <strong>English |</strong>
      </span>
      <a id="switchToWelsh" lang="cy" href="/personal-account/lang/cyGb?redirectUrl&#61;%2Fpersonal-account" data-journey-click="link - click:lang-select:Cymraeg">
        <small>
          <strong>Cymraeg</strong>
        </small>
      </a>
    </li>
  </ul>
<!-- END LANGUAGE TOGGLE -->

        </nav>
      </div>
    </div>
  </div>
</header>
<div id="global-header-bar"></div>
<!-- END GOV.UK HEADER -->
<main id="content" role="main">
  <!-- ACCOUNT MENU -->
  <nav id="secondary-nav" class="account-menu" role="navigation" aria-label="Account">
    <a href="#" class="account-menu__link account-menu__link--home account-menu__link--active">
      <span class="account-icon account-icon--home">Account home</span>
    </a>
    <a href="#" class="account-menu__link account-menu__link--menu js-hidden js-visible" aria-hidden="true" aria-expanded="false">Account menu</a>
    <ul class="account-menu__main js-hidden">
      <li class="account-menu__link--back hidden" aria-hidden="true">
        <a href="#" class="account-menu__link">Back</a>
      </li>
      <li>
        <a href="#" class="account-menu__link">Messages<span class="badge">2</span>
        </a>
      </li>
      <li>
        <a href="#" class="account-menu__link">Check progress</a>
      </li>
      <li>
        <a href="#subnav-your-account" id="account-menu__main-2" class="account-menu__link account-icon account-menu__link--more" aria-haspopup="true" aria-owns="subnav-your-account">
          Your account
        </a>
        <div class="subnav js-hidden" id="subnav-your-account" role="navigation" aria-labelledby="account-menu__main-2" aria-label="Your account">
          <div class="subnav__section column-half">
            <p class="subnav__section__heading">Paperless settings</p>
            <div>
              <a href="#">Manage your paperless settings</a>
            </div>
          </div>
          <div class="subnav__section column-half">
            <p class="subnav__section__heading">Personal details</p>
            <div>
              <a href="#">Manage your personal details</a>
            </div>
          </div>
        </div>
      </li>
      <li>
        <a href="#" class="account-menu__link">Sign out</a>
      </li>
    </ul>
  </nav>
  <!-- END ACCOUNT MENU -->
</main>

Welsh translation of this example

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

Help and support

Contact the Service Design Tools team in #team-sdt on HMRC Slack (open in app) or email us.