Skip to main content Skip to list of components
Service phase: 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. Component 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" 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

Options for the logo.

See macro options for logo.
navigation array

A list of main navigation links.

See macro options for navigation.
topNavigation array

A list of smaller navigation links displayed at the top of the header.

See macro options for topNavigation.
accent boolean

If true, use the page's accent colour as the background colour for the header.
navigationId string

An optional ID for the main navigation <nav> element.
phaseBanner object

An optional phase banner to display at the top of the header.

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 navigation
Name Type Description
text string

Required.

The text of the navigation item.
href string

Required.

The URL of the navigation item.
title string

An optional title attribute for the navigation item.
selected boolean

If true, highlight this navigation item as the currently selected page or section.
Options for topNavigation
Name Type Description
text string

Required.

The text of the navigation item.
href string

Required.

The URL of the navigation item.
title string

An optional title attribute for the navigation item.
icon string

An optional Font Awesome icon, without the fa- prefix.
Options for phaseBanner
Name Type Description
phase string

Required.

The phase to display in the banner. This should either be 'Proof of concept', 'Prototype', 'Alpha' or 'Beta'.
message string

Required.

A message to explain the phase of the service. Include a link to provide feedback.
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"
    }
  ]
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/header/macro.html" import tnaHeader %}

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

Component status

Phase
To be reviewed
Tested without JavaScript
Yes
Tested without CSS
Yes
Passed DAC audit
Not yet audied
Documentation complete
No

Back to top