Components

Header

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

Status

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" focusable="false">
            <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 macro options for logo.
navigation	array	See macro options for navigation.
topNavigation	array	See macro options for topNavigation.
accent	boolean
navigationId	string
phaseBanner	object	See macro options for phaseBanner.
classes	string	Classes to add to the header.
attributes	object	HTML attributes (for example data attributes) to add to the header.

Options for logo
Name	Type	Description
href	string
title	string
strapline	string

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

Options for phaseBanner
Name	Type	Description
phase	string	Required.
message	string	Required.
classes	string	Classes to add to the phase banner.
attributes	object	HTML attributes (for example data attributes) to add to the phase banner.

{% 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
Passed DAC audit: Not yet audied
Analytics integrated: In development
Documentation complete: No

This website uses cookies

Header

Contents

HTML

Nunjucks

Status