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.

The title of the secondary navigation.
headingLevel number

Required.

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

If true, hide the secondary navigation heading.

Default value: false
items array

Required.

A list of navigation items.

See macro options for items.
noBottomBorder boolean

If true, hide the bottom border of the secondary navigation. This can be useful when the secondary navigation is placed at the bottom of a coloured block.
overflow boolean

If true, enable horizontal scrolling for the secondary navigation when the list of items becomes too long.
noUnindentation boolean

If true, don't apply 'unindentation' to the secondary navigation. Used for when the secondary navigation is placed inside a nested container.
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.

The text of the navigation item.
href string

Required.

The URL of the navigation item.
current boolean

If true, highlight the navigation item as the current page.

 
{% 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
}) }}

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/secondary-navigation/macro.html" 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
Documentation complete
No

Back to top