Components
Sub navigation
Last updated: 25 January 2024
<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'
}]
}) }}
To use the component in your design, add the MoJ Figma Kit to your Figma libraries and find the component using the Assets tab.
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.