Components Sub navigation

Last updated: 29 March 2022

Open this example (Sub navigation (example)) in a new window 
<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'
  }]
}) }}

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.