Components Side navigation

The side navigation component is a list of related links within a service.

<button class="dwp-side-navigation__button" data-module="dwp-side-navigation"
data-target="dwp-side-navigation-panel"
data-label-hide="Hide navigation"
data-label-show="Show navigation"
aria-expanded="false">
<span class="dwp-side-navigation__section-toggle-focus">
<span class="dwp-side-navigation__chevron dwp-side-navigation__chevron--down"></span>
<span class="dwp-side-navigation__section-toggle-text">Show navigation</span>
</span>
</button>
<nav data-module="dwp-side-navigation-panel" class="dwp-side-navigation dwp-side-navigation--mobile" aria-label="Side" role="navigation">
<ul class="dwp-side-navigation__list">
<li class="dwp-side-navigation__item">
  <a href="#item-1" class="dwp-side-navigation__link">
    Item 1
  </a>
</li>
<li class="dwp-side-navigation__item">
  <a href="#item-2" class="dwp-side-navigation__link">
    Item 2
  </a>
</li>
<li class="dwp-side-navigation__item">
  <a href="#item-3" class="dwp-side-navigation__link">
    Item 3
  </a>
</li>
<li class="dwp-side-navigation__item">
  <a href="#item-4" class="dwp-side-navigation__link">
    Item 4
  </a>
</li>
<li class="dwp-side-navigation__item">
  <a href="#item-5" class="dwp-side-navigation__link">
    Item 5
  </a>
</li>
</ul>
</nav>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Name	Type	Description
items	array	Required.Array of object navigation items
selectedItem	string	URL string to highlight selected navigation item
selectedSubItem	string	URL string to highlight selected navigation sub item
ariaLabel	string	Aria label for navigation, defaults to 'Side Navigation'
mobile	object	Object of options to control mobile navigation

{% from "side-navigation/macro.njk" import dwpSideNavigation %}

{{ 
    dwpSideNavigation({
        pageId: "side-navigation-1",
        items: [
            {
              text: "Item 1",
              href: "#item-1"
            },
            {
              text: "Item 2",
              href: "#item-2"
            },
            {
              text: "Item 3",
              href: "#item-3"
            },
            {
              text: "Item 4",
              href: "#item-4"
            },
            {
              text: "Item 5",
              href: "#item-5"
            }
        ]
    })
}}

When to use this component

Use this component when users need to move around related pages within an area of a service.

The side navigation component is for use in internal services.

When not to use this component

You should not use side navigation as the main navigation in a service. For information on how to display main navigation in internal services contact the DWP Design System team who are developing this component.

You should not use this component in public-facing services.

How it works

The side navigation is as a list of links on the left-hand side of the page, below the header and next to the main content. The page the user is on is highlighted in the list. Each link should take the user to different content.

<button class="dwp-side-navigation__button" data-module="dwp-side-navigation"
data-target="dwp-side-navigation-panel"
data-label-hide="Hide navigation"
data-label-show="Show navigation"
aria-expanded="false">
<span class="dwp-side-navigation__section-toggle-focus">
<span class="dwp-side-navigation__chevron dwp-side-navigation__chevron--down"></span>
<span class="dwp-side-navigation__section-toggle-text">Show navigation</span>
</span>
</button>
<nav data-module="dwp-side-navigation-panel" class="dwp-side-navigation dwp-side-navigation--mobile" aria-label="Side" role="navigation">
<ul class="dwp-side-navigation__list">
<li class="dwp-side-navigation__item">
  <a href="#item-1" class="dwp-side-navigation__link">
    Item 1
  </a>
</li>
<li class="dwp-side-navigation__item dwp-side-navigation__item--selected">
  <a href="#item-2" class="dwp-side-navigation__link dwp-side-navigation__link--selected" aria-current="page">
    Item 2
  </a>
</li>
<li class="dwp-side-navigation__item">
  <a href="#item-3" class="dwp-side-navigation__link">
    Item 3
  </a>
</li>
<li class="dwp-side-navigation__item">
  <a href="#item-4" class="dwp-side-navigation__link">
    Item 4
  </a>
</li>
<li class="dwp-side-navigation__item">
  <a href="#item-5" class="dwp-side-navigation__link">
    Item 5
  </a>
</li>
</ul>
</nav>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Name	Type	Description
items	array	Required.Array of object navigation items
selectedItem	string	URL string to highlight selected navigation item
selectedSubItem	string	URL string to highlight selected navigation sub item
ariaLabel	string	Aria label for navigation, defaults to 'Side Navigation'
mobile	object	Object of options to control mobile navigation

{% from "side-navigation/macro.njk" import dwpSideNavigation %}

{{ 
    dwpSideNavigation({
        pageId: "side-navigation-2",
        selectedItem: "#item-2",
        items: [
            {
              text: "Item 1",
              href: "#item-1"
            },
            {
              text: "Item 2",
              href: "#item-2"
            },
            {
              text: "Item 3",
              href: "#item-3"
            },
            {
              text: "Item 4",
              href: "#item-4"
            },
            {
              text: "Item 5",
              href: "#item-5"
            }
        ]
    })
}}

<nav class="dwp-side-navigation" aria-label="Side" role="navigation">
<ul class="dwp-side-navigation__list">
<li class="dwp-side-navigation__item">
  <a href="#1" class="dwp-side-navigation__link">
    Item 1
  </a>
</li>
<li class="dwp-side-navigation__item dwp-side-navigation__item--selected">
  <a id="item-2" href="#item-2" class="dwp-side-navigation__link dwp-side-navigation__link--selected" aria-current="page">
    Item 2
  </a>
  <ul class="dwp-side-navigation__list dwp-side-navigation__list--sub-item">
    <li class="dwp-side-navigation__sub-item">
      <a href="#subitem-1" class="dwp-side-navigation__link">
        subitem 1
      </a>
    </li>
    <li class="dwp-side-navigation__sub-item">
      <a href="#subitem-2" class="dwp-side-navigation__link">
        subitem 2
      </a>
    </li>
    <li class="dwp-side-navigation__sub-item">
      <a href="#subitem-3" class="dwp-side-navigation__link">
        subitem 3
      </a>
    </li>
  </ul>
</li>
<li class="dwp-side-navigation__item">
  <a href="#item-3" class="dwp-side-navigation__link">
    Item 3
  </a>
</li>
<li class="dwp-side-navigation__item">
  <a href="#item-4" class="dwp-side-navigation__link">
    Item 4
  </a>
</li>
<li class="dwp-side-navigation__item">
  <a href="#item-5" class="dwp-side-navigation__link">
    Item 5
  </a>
</li>
</ul>
</nav>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Name	Type	Description
items	array	Required.Array of object navigation items
selectedItem	string	URL string to highlight selected navigation item
selectedSubItem	string	URL string to highlight selected navigation sub item
ariaLabel	string	Aria label for navigation, defaults to 'Side Navigation'
mobile	object	Object of options to control mobile navigation

{% from "side-navigation/macro.njk" import dwpSideNavigation %}

{{ 
    dwpSideNavigation({
        pageId: "side-navigation-2",
        selectedItem: "#item-2",
        items: [
        {
            text: "Item 1",
            href: "#1"
        },
        {
            text: "Item 2",
            href: "#item-2",
            id: "item-2",
            subItems: [
                {
                    text: "subitem 1",
                    href: "#subitem-1"
                },
                {
                    text: "subitem 2",
                    href: "#subitem-2"
                },
                {
                    text: "subitem 3",
                    href: "#subitem-3"
                }
            ]
        },
        {
            text: "Item 3",
            href: "#item-3"
        },
        {
            text: "Item 4",
            href: "#item-4"
        },
        {
            text: "Item 5",
            href: "#item-5"
        }
        ],
        mobile: { 
            disabled: true
        }
    })
}}

Child pages are shown underneath the link section and revealed when a user selects the section. The section is then highlighted and any child pages are indented and preceded by a dash.

Mobile view

<button class="dwp-side-navigation__button" data-module="dwp-side-navigation"
data-target="dwp-side-navigation-panel"
data-label-hide="Hide navigation"
data-label-show="Show navigation"
aria-expanded="false">
<span class="dwp-side-navigation__section-toggle-focus">
<span class="dwp-side-navigation__chevron dwp-side-navigation__chevron--down"></span>
<span class="dwp-side-navigation__section-toggle-text">Show navigation</span>
</span>
</button>
<nav data-module="dwp-side-navigation-panel" class="dwp-side-navigation dwp-side-navigation--mobile" aria-label="Side" role="navigation">
<ul class="dwp-side-navigation__list">
<li class="dwp-side-navigation__item">
  <a href="#item-1" class="dwp-side-navigation__link">
    Item 1
  </a>
</li>
<li class="dwp-side-navigation__item">
  <a href="#item-2" class="dwp-side-navigation__link">
    Item 2
  </a>
</li>
<li class="dwp-side-navigation__item">
  <a href="#item-3" class="dwp-side-navigation__link">
    Item 3
  </a>
</li>
<li class="dwp-side-navigation__item">
  <a href="#item-4" class="dwp-side-navigation__link">
    Item 4
  </a>
</li>
<li class="dwp-side-navigation__item">
  <a href="#item-5" class="dwp-side-navigation__link">
    Item 5
  </a>
</li>
</ul>
</nav>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Name	Type	Description
items	array	Required.Array of object navigation items
selectedItem	string	URL string to highlight selected navigation item
selectedSubItem	string	URL string to highlight selected navigation sub item
ariaLabel	string	Aria label for navigation, defaults to 'Side Navigation'
mobile	object	Object of options to control mobile navigation

{% from "side-navigation/macro.njk" import dwpSideNavigation %}

{{ 
    dwpSideNavigation({
        pageId: "side-navigation-1",
        items: [
            {
              text: "Item 1",
              href: "#item-1"
            },
            {
              text: "Item 2",
              href: "#item-2"
            },
            {
              text: "Item 3",
              href: "#item-3"
            },
            {
              text: "Item 4",
              href: "#item-4"
            },
            {
              text: "Item 5",
              href: "#item-5"
            }
        ]
    })
}}

On smaller viewports, including mobile, the navigation is displayed as an expandable list that sits at the top of the page, under the service header.

If the user’s device is not using JavaScript

If the user’s device is not running JavaScript the full navigation should always be visible.

Accessibility

On mobile the menu is hidden and revealed using a JavaScript link. This method is used in the GOV.UK Design System Accordion component which some users have found difficult to use. See the GOV.UK guidance on the Accordion component for more detail.

The font size is 16px at desktop view sizes. This is smaller than the standard size for body text at desktop on an internal service page, which is 19px.

For more about building accessible services see the DWP Accessibility Manual.

Research

This component is being tested in the Health Assessment Service.

Contribute

If you have used or researched this component, please let us know what you found so we can make it better for everyone. There is an open discussion on GitHub where you can share anything you think might be useful.

For this pattern we’re particularly interested in:

how the side navigation works on smaller viewports
the stacking of components, for example how users interact with the side navigation when it is used alongside the header, main navigation or key details components

Discuss side navigation on GitHub

Get in touch

If you’ve got a question, idea or suggestion email the Design System team on dwp-design-system@engineering.digital.dwp.gov.uk

Cookies on the DWP Design System website

Components Side navigation

When to use this component

When not to use this component

How it works

Side navigation with child pages

Mobile view

If the user’s device is not using JavaScript

Accessibility

Research

Contribute

Get in touch