Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Section navigation

Use the section navigation component to help a user navigate across pages of closely related content, that have been grouped in context, within a main section.

Open this example in a new tab (Example: Example Section Navigation)

Example: Example Section Navigation contents

Nunjucks

{% from "components/section-navigation/_macro.njk" import onsSectionNavigation %}
{{
    onsSectionNavigation({
        "id": "section-menu",
        "currentPath": "#section-1",
        "itemsList": [
            {
                "title": "Section 1",
                "url": "#section-1"
            },
            {
                "title": "Section 2",
                "url": "#0"
            },
            {
                "title": "Section 3",
                "url": "#0"
            }
        ]
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
idstringfalseThe HTML id of the <nav> element of the component
classesstringfalseAdditional classes for the <nav> element
currentPathstringtrue (unless tabQuery set)Path to the current active page
tabQuerystringtrue (unless currentPath set)Query parameter in the URL for the current active page
ariaLabelstringfalseThe aria-label attribute for the <nav> element to describe its purpose. Defaults to ”Section menu”.
itemsListArray<Item>trueAn array of list items to display in the section navigation element
variantsstringfalseTo adjust the orientation of the component using available variant “vertical”

Item

NameTypeRequiredDescription
classesstringfalseAdditional classes for the list item element
urlstringtrueThe URL for the HTML href attribute for the link
titlestringtrueThe text for the link
anchorsArray<Anchors>falseAn array of sub-section list anchors to display in the vertical variant of the component

Anchors

NameTypeRequiredDescription
urlstringtrueThe HTML id of the heading tag on the page to link to
titlestringtrueThe text for the anchor link

HTML

<nav class="ons-section-nav" id="section-menu" aria-label="Section menu">
  <ul class="ons-section-nav__list">
    <li class="ons-section-nav__item ons-section-nav__item--active">
      <a class="ons-section-nav__link" href="#section-1" aria-current="location">Section 1</a>
    </li>
    <li class="ons-section-nav__item">
      <a class="ons-section-nav__link" href="#0">Section 2</a>
    </li>
    <li class="ons-section-nav__item">
      <a class="ons-section-nav__link" href="#0">Section 3</a>
    </li>
  </ul>
</nav>

When not to use this component

Do not use this component to help users navigate pages of content that are not closely related or that a user might search a website or service for.

If you want to group together related content within a single page, use tabs.

How to use this component

This component can be implemented with main navigation in the Header.

It can also be used without any parent level navigation to help users switch across pages of the same type. For example, moving between different views on a survey list (such as: completed, to do and archived).

Variants

Vertical

Use the parameter 'variants': 'vertical' to display the navigation vertically.

Use this variant where you need to include subsections, or the content is broken down into many different pages.

Open this example in a new tab (Example: Example Section Navigation Vertical)

Example: Example Section Navigation Vertical contents

Nunjucks

{% from "components/section-navigation/_macro.njk" import onsSectionNavigation %}
{{
    onsSectionNavigation({
        "variants": "vertical",
        "id": "section-menu",
        "currentPath": "#section-2",
        "itemsList": [
            {
                "title": "Section 1",
                "url": "#section-1"
            },
            {
                "title": "Section 2",
                "url": "#section-2",
                "anchors": [
                    {
                        "title": "Sub section 1",
                        "url": "#sub-section-1"
                    },
                    {
                        "title": "Sub section 2",
                        "url": "#sub-section-2"
                    },
                    {
                        "title": "Sub section 3",
                        "url": "#sub-section-3"
                    }
                ]
            },
            {
                "title": "Section 3",
                "url": "#0"
            },
            {
                "title": "Section 4",
                "url": "#0"
            }
        ]
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
idstringfalseThe HTML id of the <nav> element of the component
classesstringfalseAdditional classes for the <nav> element
currentPathstringtrue (unless tabQuery set)Path to the current active page
tabQuerystringtrue (unless currentPath set)Query parameter in the URL for the current active page
ariaLabelstringfalseThe aria-label attribute for the <nav> element to describe its purpose. Defaults to ”Section menu”.
itemsListArray<Item>trueAn array of list items to display in the section navigation element
variantsstringfalseTo adjust the orientation of the component using available variant “vertical”

Item

NameTypeRequiredDescription
classesstringfalseAdditional classes for the list item element
urlstringtrueThe URL for the HTML href attribute for the link
titlestringtrueThe text for the link
anchorsArray<Anchors>falseAn array of sub-section list anchors to display in the vertical variant of the component

Anchors

NameTypeRequiredDescription
urlstringtrueThe HTML id of the heading tag on the page to link to
titlestringtrueThe text for the anchor link

HTML

<nav class="ons-section-nav ons-section-nav--vertical" id="section-menu" aria-label="Section menu">
  <ul class="ons-section-nav__list">
    <li class="ons-section-nav__item">
      <a class="ons-section-nav__link" href="#section-1">Section 1</a>
    </li>
    <li class="ons-section-nav__item ons-section-nav__item--active">
      <a class="ons-section-nav__link" href="#section-2" aria-current="location">Section 2</a>
      <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
        <li class="ons-section-nav__item ons-list__item">
          <a href="#sub-section-1" class="ons-section-nav__link ons-list__link">Sub section 1</a>
        </li>
        <li class="ons-section-nav__item ons-list__item">
          <a href="#sub-section-2" class="ons-section-nav__link ons-list__link">Sub section 2</a>
        </li>
        <li class="ons-section-nav__item ons-list__item">
          <a href="#sub-section-3" class="ons-section-nav__link ons-list__link">Sub section 3</a>
        </li>
      </ul>
    </li>
    <li class="ons-section-nav__item">
      <a class="ons-section-nav__link" href="#0">Section 3</a>
    </li>
    <li class="ons-section-nav__item">
      <a class="ons-section-nav__link" href="#0">Section 4</a>
    </li>
  </ul>
</nav>

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Section navigation’ component on GitHub (opens in a new tab)