Components Primary navigation

Last updated: 29 March 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.

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.

If your service can search anything, use an inline search form.

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.