Skip to main content

Components Sub navigation

<nav class="moj-sub-navigation" aria-label="Sub navigation">

  <ul class="moj-sub-navigation__list">
    <li class="moj-sub-navigation__item">
      <a class="moj-sub-navigation__link" aria-current="page" href="#1">Nav item 1</a>
    </li>

    <li class="moj-sub-navigation__item">
      <a class="moj-sub-navigation__link" href="#2">Nav item 2</a>
    </li>

    <li class="moj-sub-navigation__item">
      <a class="moj-sub-navigation__link" href="#3">Nav item 3</a>
    </li>
  </ul>

</nav>

Nunjucks macro options

Container

Name Type Required Description
label string No The aria-label to add to the nav container. Defaults to 'Secondary navigation region'.
items array Yes An array of navigation item objects. See items.
classes string No Classes to add to the nav container.
attributes object No HTML attributes (for example data attributes) to add to the nav container.

Items

Name Type Required Description
href string Yes URL of the navigation item anchor. Both href and text attributes for navigation items need to be provided to create an item.
text string Yes If html is set, this is not required. Text to use within the anchor. If html is provided, the text argument will be ignored.
html string Yes If text is set, this is not required. HTML to use within the anchor. If html is provided, the text argument will be ignored.
active boolean No Flag to mark the navigation item as active or not. Defaults to false.
attributes object No HTML attributes (for example data attributes) to add to the navigation item anchor.

Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with .html can be at risk from cross-site scripting attacks. More information about security vulnerabilities can be found in the Nunjucks documentation.

{%- from "moj/components/sub-navigation/macro.njk" import mojSubNavigation -%}

{{ mojSubNavigation({
  label: 'Sub navigation',
  items: [{
    text: 'Nav item 1',
    href: '#1',
    active: true
  }, {
    text: 'Nav item 2',
    href: '#2'
  }, {
    text: 'Nav item 3',
    href: '#3'
  }]
}) }}

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

View component in MoJ Figma Kit

When to use

Use the sub navigation component to let users navigate sub sections in a system or service.

Use this component when you have a second level of navigation. See also the side navigation component

When not to use

Do not use this component for primary level items or global navigation items.

Get help and contribute

Get help

You can contact the MoJ Design System team for help or support using this component.

Help improve this component

The MoJ Design System team would like to hear:

  • how you have used this component in your service
  • any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the sub navigation discussion on Github.