Skip to main content Skip to list of components
Beta

This is a new service – give us your feedback to help improve it.

Components

Header

The header component shows users they are on a National Archives service and provides navigation links.

Contents

  1. Status
Open this example in new tab

HTML 

<header class="tna-header" data-module="tna-header">
  <div class="tna-container tna-header__contents">
    <div class="tna-column tna-header__logo-wrapper">
      <span class="tna-header__logo">
        <span class="tna-logo tna-logo--adornable">
          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 160 160" width="96" height="96" aria-hidden="true">
            <path fill="transparent" d="M0 0h160v160H0z" class="tna-logo__background" />
            <g class="tna-logo__foreground" fill="currentColor">
              <path d="M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z" />
              <path d="M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z" />
            </g>
          </svg>
        </span>
      </span>
    </div>
    <div class="tna-column tna-header__navigation-button-wrapper">
      <button class="tna-header__navigation-button" type="button" aria-controls="tna-header__navigation" hidden>
        Menu
        <span class="tna-header__hamburger"></span>
      </button>
    </div>
    <nav class="tna-column tna-column--flex-1 tna-column--full-small tna-column--full-tiny tna-header__navigation" id="tna-header__navigation" aria-label="Primary">
      <ul class="tna-header__navigation-items">
        <li class="tna-header__navigation-item">
          <a href="#/alpha" class="tna-header__navigation-item-link tna-header__navigation-item-link--selected" tabindex="0" aria-current="page">
            Alpha
          </a>
        </li>
        <li class="tna-header__navigation-item">
          <a href="#/beta" class="tna-header__navigation-item-link" tabindex="0">
            Beta
          </a>
        </li>
        <li class="tna-header__navigation-item">
          <a href="#/gamma" class="tna-header__navigation-item-link" tabindex="0">
            Gamma
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Nunjucks

Nunjucks options
Primary options
Name Type Description
logo object

See logo.
navigation array

See navigation.
topNavigation array

See topNavigation.
accent boolean
navigationId string
classes string

Classes to add to the header.
attributes object

HTML attributes (for example data attributes) to add to the header.
Options for navigation
Name Type Description
text string

Required.

href string

Required.

title string
selected boolean
Options for topNavigation
Name Type Description
text string

Required.

href string

Required.

title string
icon string 
{% from "nationalarchives/components/header/macro.njk" import tnaHeader %}

{{ tnaHeader({
  navigation: [
    {
      text: "Alpha",
      href: "#/alpha",
      selected: true
    },
    {
      text: "Beta",
      href: "#/beta"
    },
    {
      text: "Gamma",
      href: "#/gamma"
    }
  ]
}) }}

Status

Status
Ready for production
Tested without JavaScript
Yes
Tested without CSS
Yes
WCAG 2.2 AA compliant
Yes
Analytics integrated
In development
Documentation complete
No

Back to top