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.