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

Secondary navigation

Add secondary navigation to allow users to navigate between different areas of your service.

Contents

  1. Component status
Open this example in new tab

HTML 

<nav class="tna-secondary-navigation" aria-label="Sections">
  <h2 class="tna-secondary-navigation__heading tna-heading-s">
    Sections
  </h2>
  <ul class="tna-secondary-navigation__items">
    <li class="tna-secondary-navigation__item">
      <a href="#" class="tna-secondary-navigation__link">Alpha</a>
    </li>
    <li class="tna-secondary-navigation__item tna-secondary-navigation__item--current">
      <a href="#" class="tna-secondary-navigation__link">Beta</a>
    </li>
    <li class="tna-secondary-navigation__item">
      <a href="#" class="tna-secondary-navigation__link">Gamma</a>
    </li>
    <li class="tna-secondary-navigation__item">
      <a href="#" class="tna-secondary-navigation__link">Delta</a>
    </li>
  </ul>
</nav>

Nunjucks

Nunjucks options
Primary options
Name Type Description
title string

Required.

headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
visuallyHideHeading boolean

Default value: false
items array

Required.

See macro options for items.
noBottomBorder boolean
overflow boolean
noUnindentation boolean
classes string

Classes to add to the secondary navigation.
attributes object

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

Required.

href string

Required.

current boolean 
{% from "nationalarchives/components/secondary-navigation/macro.njk" import tnaSecondaryNavigation %}

{{ tnaSecondaryNavigation({
  title: "Sections",
  headingLevel: 2,
  items: [
    {
      name: "Alpha",
      href: "#"
    },
    {
      name: "Beta",
      href: "#",
      current: true
    },
    {
      name: "Gamma",
      href: "#"
    },
    {
      name: "Delta",
      href: "#"
    }
  ],
  noUnindentation: true
}) }}

Component status

Phase
To be reviewed
Tested without CSS
Yes
Passed DAC audit
Not yet audied
Analytics integrated
In development
Documentation complete
No

Back to top