Components Primary navigation
Last updated: 11 October 2022
<div class="moj-primary-navigation">
<div class="moj-primary-navigation__container">
<div class="moj-primary-navigation__nav">
<nav class="moj-primary-navigation" aria-label="Primary navigation">
<ul class="moj-primary-navigation__list">
<li class="moj-primary-navigation__item">
<a class="moj-primary-navigation__link" aria-current="page" href="#1">Nav item 1</a>
</li>
<li class="moj-primary-navigation__item">
<a class="moj-primary-navigation__link" href="#2">Nav item 2</a>
</li>
<li class="moj-primary-navigation__item">
<a class="moj-primary-navigation__link" href="#3">Nav item 3</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
Nunjucks macro options
Container
Name | Type | Required | Description |
---|---|---|---|
label | string | No | The aria-label to add to the navigation container. |
items | array | Yes | An array of navigation item objects. See items. |
searchHtml | sting | No | |
containerClasses | string | No | Classes to add to the parent div container. |
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/primary-navigation/macro.njk" import mojPrimaryNavigation -%}
{{ mojPrimaryNavigation({
label: 'Primary 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 primary navigation component to let users navigate and search your service.
How to use
You must use this component with the header component.
Links
You must only include links to top level sections within your service.
Do not put calls to action in the primary navigation. For example, ‘Create case’ should be an action from within the ‘cases’ section and not a link inside the primary navigation.
Inline search
If your service can search anything, use an inline search form.
<div class="moj-primary-navigation">
<div class="moj-primary-navigation__container">
<div class="moj-primary-navigation__nav">
<nav class="moj-primary-navigation" aria-label="Primary navigation">
<ul class="moj-primary-navigation__list">
<li class="moj-primary-navigation__item">
<a class="moj-primary-navigation__link" aria-current="page" href="#1">Nav item 1</a>
</li>
<li class="moj-primary-navigation__item">
<a class="moj-primary-navigation__link" href="#2">Nav item 2</a>
</li>
<li class="moj-primary-navigation__item">
<a class="moj-primary-navigation__link" href="#3">Nav item 3</a>
</li>
</ul>
</nav>
</div>
<div class="moj-primary-navigation__search">
<div class="moj-search moj-search--ondark moj-search--inline">
<form action="" method="get">
<div class="govuk-form-group">
<label class="govuk-label moj-search__label govuk-visually-hidden" for="search-1">
Search
</label>
<input class="govuk-input moj-search__input " id="search-1" name="search-1" type="search">
</div>
<button class="govuk-button moj-search__button " data-module="govuk-button">
Search
</button>
</form>
</div>
</div>
</div>
</div>
{%- from "moj/components/primary-navigation/macro.njk" import mojPrimaryNavigation -%}
{%- from "moj/components/search/macro.njk" import mojSearch -%}
{%- set inlineSearchHtml %}
{{ mojSearch({
classes: 'moj-search--ondark moj-search--inline',
input: {
id: 'search-1',
name: 'search-1'
},
label: {
text: 'Search',
classes: 'govuk-visually-hidden'
},
button: {
text: 'Search'
}
}) }}
{% endset -%}
{{ mojPrimaryNavigation({
label: 'Primary navigation',
items: [{
text: 'Nav item 1',
href: '#1',
active: true
}, {
text: 'Nav item 2',
href: '#2'
}, {
text: 'Nav item 3',
href: '#3'
}],
searchHtml: inlineSearchHtml
}) }}
Toggle search
If your service can only search for certain things, use a toggle search form.
You must tell users what they are searching for in the form hint text, and how they can search using the data-moj-search-toggle-text
attribute.
<div class="moj-primary-navigation">
<div class="moj-primary-navigation__container">
<div class="moj-primary-navigation__nav">
<nav class="moj-primary-navigation" aria-label="Primary navigation">
<ul class="moj-primary-navigation__list">
<li class="moj-primary-navigation__item">
<a class="moj-primary-navigation__link" aria-current="page" href="#1">Nav item 1</a>
</li>
<li class="moj-primary-navigation__item">
<a class="moj-primary-navigation__link" href="#2">Nav item 2</a>
</li>
<li class="moj-primary-navigation__item">
<a class="moj-primary-navigation__link" href="#3">Nav item 3</a>
</li>
</ul>
</nav>
</div>
<div class="moj-primary-navigation__search">
<div class="moj-search-toggle" data-module="moj-search-toggle" data-moj-search-toggle-text="Find case">
<div class="moj-search-toggle__toggle"></div>
<div class="moj-search-toggle__search">
<div class="moj-search moj-search--ondark moj-search--toggle moj-js-hidden">
<form action="" method="get">
<div class="govuk-form-group">
<label class="govuk-label moj-search__label govuk-visually-hidden" for="search2">
Search
</label>
<div id="search2-hint" class="govuk-hint moj-search__hint ">
Enter case number, for example 123456
</div>
<input class="govuk-input moj-search__input " id="search2" name="search2" type="search" aria-describedby="search2-hint">
</div>
<button class="govuk-button moj-search__button " data-module="govuk-button">
Search
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
{%- from "moj/components/primary-navigation/macro.njk" import mojPrimaryNavigation -%}
{%- from "moj/components/search/macro.njk" import mojSearch -%}
{%- set toggleSearchHtml %}
<div class="moj-search-toggle" data-module="moj-search-toggle" data-moj-search-toggle-text="Find case">
<div class="moj-search-toggle__toggle"></div>
<div class="moj-search-toggle__search">
{{ mojSearch({
classes: 'moj-search--ondark moj-search--toggle moj-js-hidden',
input: {
id: 'search2',
name: 'search2'
},
label: {
classes: 'govuk-visually-hidden',
text: 'Search'
},
hint: {
text: 'Enter case number, for example 123456'
},
button: {
text: 'Search'
}
}) }}
</div>
</div>
{% endset -%}
{{ mojPrimaryNavigation({
label: 'Primary navigation',
items: [
{
text: 'Nav item 1',
href: '#1',
active: true
},
{
text: 'Nav item 2',
href: '#2'
},
{
text: 'Nav item 3',
href: '#3'
}
],
searchHtml: toggleSearchHtml
}) }}