Components

Sub navigation

To be reviewed

Created in June 2021.

How to use ‘to be reviewed’ components

Components with a ‘to be reviewed’ status have been added for use by everyone, but have not been checked or improved recently. Read about all the Design System statuses.

Open this 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"
  }]
}) }}

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

If you work for MOJ, you can view this component in the MOJ Figma Kit.

If you work outside MOJ, read the guidance on setting up Figma prototypes for non-MoJ staff.

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. There’s also the side navigation component.

You can use the notification badge component to show that there are new or unread items in the sub sections.

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.