Secondary navigation

Allow users to navigate between pages scoped to a section.

Preview
HTML
Nunjucks

<nav class="x-govuk-secondary-navigation" aria-label="Secondary menu">
  <ul class="x-govuk-secondary-navigation__list">
    <li class="x-govuk-secondary-navigation__list-item x-govuk-secondary-navigation__list-item--current">
      <a class="x-govuk-secondary-navigation__link" href="#" aria-current=page>
        Overview
      </a>
    </li>
    <li class="x-govuk-secondary-navigation__list-item ">
      <a class="x-govuk-secondary-navigation__link" href="#">
        Staff list
      </a>
    </li>
    <li class="x-govuk-secondary-navigation__list-item ">
      <a class="x-govuk-secondary-navigation__link" href="#">
        Projects
      </a>
    </li>
    <li class="x-govuk-secondary-navigation__list-item ">
      <a class="x-govuk-secondary-navigation__link" href="#">
        Settings
      </a>
    </li>
  </ul>
</nav>

{{ xGovukSecondaryNavigation({
  visuallyHiddenTitle: "Secondary menu",
  items: [{
    text: "Overview",
    href: "#",
    current: true
  }, {
    text: "Staff list",
    href: "#"
  }, {
    text: "Projects",
    href: "#"
  }, {
    text: "Settings",
    href: "#"
  }]
}) }}

When to use this component

Use the secondary navigation when you already have a primary navigation and need to let users navigate between pages that are scoped to a particular section or concept.

For example, if your service is a case management system, you might use the secondary navigation if there are multiple pages associated with a single case.

When not to use this component

Do not use this component for the primary sections of your service, or if a sub-navigation would be more appropriate.

You could also consider using the tabs component if the amount of content in each sub-section is small.

<span class="govuk-caption-l">Case #161351</span>
<h1 class="govuk-heading-l" id="case-name">James Smith</h1>
<nav class="x-govuk-secondary-navigation" aria-labelledby="case-name">
  <ul class="x-govuk-secondary-navigation__list">
    <li class="x-govuk-secondary-navigation__list-item ">
      <a class="x-govuk-secondary-navigation__link" href="#">
        Overview
      </a>
    </li>
    <li class="x-govuk-secondary-navigation__list-item x-govuk-secondary-navigation__list-item--current">
      <a class="x-govuk-secondary-navigation__link" href="#" aria-current=page>
        Contact details
      </a>
    </li>
    <li class="x-govuk-secondary-navigation__list-item ">
      <a class="x-govuk-secondary-navigation__link" href="#">
        Claims
      </a>
    </li>
    <li class="x-govuk-secondary-navigation__list-item ">
      <a class="x-govuk-secondary-navigation__link" href="#">
        Audit log
      </a>
    </li>
  </ul>
</nav>
<main class="govuk-main-wrapper" id="main-content" role="main">
  <h2 class="govuk-heading-m">Contact details</h2>
</main>

<span class="govuk-caption-l">Case #161351</span>
<h1 class="govuk-heading-l" id="case-name">James Smith</h1>
{{ xGovukSecondaryNavigation({

labelledBy: "case-name",

items: [{

text: "Overview",

href: "#"

}, {

text: "Contact details",

href: "#",

current: true

}, {

text: "Claims",

href: "#"

}, {

text: "Audit log",

href: "#"

}]

}) }}
<main class="govuk-main-wrapper" id="main-content" role="main">

<h2 class="govuk-heading-m">Contact details</h2>

</main>

Unlike tabs, secondary navigation does not use JavaScript. Each item within the navigation is a link to a separate full page.

One of the items should always be highlighted as the current page. This item remains a link, but uses black text and has a line beneath it.

The secondary navigation should appear before the <main> element of the page. This means that it is skipped when skip link is used.

The scope of the secondary navigation can be given by an associated heading. When doing this, you should set labelledBy to be the id of the heading, so that it is associated with the heading for screen reader users.

The title of the current page can be repeated below the sub navigation, inside the <main> element, using a heading tag.

You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description.

If you’re using Nunjucks macros in production with html options, or ones ending with html, you must sanitise the HTML to protect against cross-site scripting exploits.

Name	Type	Description
items	Array	Required. An array of navigation links. See items.
labelledBy	string	A reference to the id of an existing heading on a page which acts as the label for the navigation.
visuallyHiddenTitle	string	A visually-hidden label to describe the navigation (default is ‘Secondary Menu’). Not included if `labelledBy` is set instead.
classes	string	Classes to add to the secondary navigation container.
attributes	object	HTML attributes (for example data attributes) to add to the container.

Options for items
Name	Type	Description
text	string	Required. Text of the navigation link.
href	string	Required. The value of the navigation link’s `href` attribute.
current	boolean	Indicate that the item is the current page.
classes	string	Classes to add to the navigation item.

Research on this component

This component is based on ones originally developed as part of the Ministry of Justice and HMCTS design systems.

Versions of this component are currently used on these services:

More research is needed on:

how best to display the items on narrow mobile screens
making the component as accessible as possible