Navigation - 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 default section navigation example in new window
Copy default section navigation code 
<nav class="hs2-section-nav " id="section-menu" aria-label="Section menu">

  <ul class="hs2-section-nav__list">

    <li class="hs2-section-nav__item hs2-section-nav__item--active">
      <a class="hs2-section-nav__link" href="#section-1" aria-current="location">Section 1</a>

    </li>

    <li class="hs2-section-nav__item">
      <a class="hs2-section-nav__link" href="#0">Section 2</a>

    </li>

    <li class="hs2-section-nav__item">
      <a class="hs2-section-nav__link" href="#0">Section 3</a>

    </li>

  </ul>

</nav>
Close default section navigation code
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.

Nunjucks arguments for default section navigation
Name Type Required Description
Name id Type string Required false Description The HTML id of the <nav> element of the component
Name classes Type string Required false Description Additional classes for the <nav> element
Name ariaLabel Type string Required false Description The aria-label attribute for the <nav> element to describe its purpose. Defaults to ”Section menu”.
Name variants Type string Required false Description To adjust the orientation of the component using available variant “vertical”
Name currentPath Type string Required true (unless tabQuery set) Description Path to the current active page
Name tabQuery Type string Required true (unless currentPath set) Description Query parameter in the URL for the current active page
Name title Type string Required false Description The title/header to display in the section navigation element (only for entries without sections)
Name sections Type array Required false Description An array of sections for the component
Name sections[].title Type string Required false Description The title/header to display in each section in the navigation element
Name sections[].itemsList Type array Required true Description An array of list items to display in the section navigation list element
Name itemsList[].classes Type string Required false Description Additional classes for the list item element
Name itemsList[].url Type string Required true Description The URL for the HTML href attribute for the link
Name itemsList[].title Type string Required true Description The text for the link
Name itemsList[].anchors Type array Required false Description An array of sub-section list anchors
Name anchors[].url Type string Required true Description The HTML id of the heading tag on the page to link to
Name anchors[].title Type string Required true Description The text for the anchor link
Copy default section navigation code 
{% from "section-navigation/macro.njk" import sectionNavigation %}

{{ sectionNavigation({
  "id": "section-menu",
  "currentPath": "#section-1",
  "itemsList": [
    {
      "title": "Section 1",
      "url": "#section-1"
    },
    {
      "title": "Section 2",
      "url": "#0"
    },
    {
      "title": "Section 3",
      "url": "#0"
    }
  ]
}) }}
Close default section navigation code

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).

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.

Variants

Vertical

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

Open this vertical section navigation example in new window
Copy vertical section navigation code 
<nav class="hs2-section-nav hs2-section-nav--vertical " id="section-menu" aria-label="Section menu">

  <div class="hs2-section-nav__sub">

    <h3 class="hs2-u-font-size-19 hs2-u-margin-bottom-3">Section Title</h3>

    <ul class="hs2-section-nav__list">

      <li class="hs2-section-nav__item">
        <a class="hs2-section-nav__link" href="#section-1">Section 1</a>

      </li>

      <li class="hs2-section-nav__item">
        <a class="hs2-section-nav__link" href="#section-2">Section 2</a>

      </li>

      <li class="hs2-section-nav__item">
        <a class="hs2-section-nav__link" href="#section-3">Section 3</a>

      </li>

      <li class="hs2-section-nav__item">
        <a class="hs2-section-nav__link" href="#section-4">Section 4</a>

      </li>

    </ul>
  </div>

  <div class="hs2-section-nav__sub">

    <h3 class="hs2-u-font-size-19 hs2-u-margin-bottom-3">Section Title</h3>

    <ul class="hs2-section-nav__list">

      <li class="hs2-section-nav__item">
        <a class="hs2-section-nav__link" href="#section-5">Section 5</a>

      </li>

      <li class="hs2-section-nav__item hs2-section-nav__item--active">
        <a class="hs2-section-nav__link" href="#section-6" aria-current="location">Section 6</a>

        <ul class="hs2-section-nav__sub-items hs2-list hs2-list--dashed hs2-u-margin-top-2 hs2-u-margin-bottom-2">

          <li class="hs2-section-nav__item hs2-list__item">
            <a href="#sub-section-1" class="hs2-section-nav__link hs2-list__link">Sub section 1</a>
          </li>

          <li class="hs2-section-nav__item hs2-list__item">
            <a href="#sub-section-2" class="hs2-section-nav__link hs2-list__link">Sub section 2</a>
          </li>

          <li class="hs2-section-nav__item hs2-list__item">
            <a href="#sub-section-3" class="hs2-section-nav__link hs2-list__link">Sub section 3</a>
          </li>

        </ul>

      </li>

      <li class="hs2-section-nav__item">
        <a class="hs2-section-nav__link" href="#0">Section 7</a>

      </li>

      <li class="hs2-section-nav__item">
        <a class="hs2-section-nav__link" href="#0">Section 8</a>

      </li>

    </ul>
  </div>

</nav>
Close vertical section navigation code
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.

Nunjucks arguments for vertical section navigation
Name Type Required Description
Name id Type string Required false Description The HTML id of the <nav> element of the component
Name classes Type string Required false Description Additional classes for the <nav> element
Name ariaLabel Type string Required false Description The aria-label attribute for the <nav> element to describe its purpose. Defaults to ”Section menu”.
Name variants Type string Required false Description To adjust the orientation of the component using available variant “vertical”
Name currentPath Type string Required true (unless tabQuery set) Description Path to the current active page
Name tabQuery Type string Required true (unless currentPath set) Description Query parameter in the URL for the current active page
Name title Type string Required false Description The title/header to display in the section navigation element (only for entries without sections)
Name sections Type array Required false Description An array of sections for the component
Name sections[].title Type string Required false Description The title/header to display in each section in the navigation element
Name sections[].itemsList Type array Required true Description An array of list items to display in the section navigation list element
Name itemsList[].classes Type string Required false Description Additional classes for the list item element
Name itemsList[].url Type string Required true Description The URL for the HTML href attribute for the link
Name itemsList[].title Type string Required true Description The text for the link
Name itemsList[].anchors Type array Required false Description An array of sub-section list anchors
Name anchors[].url Type string Required true Description The HTML id of the heading tag on the page to link to
Name anchors[].title Type string Required true Description The text for the anchor link
Copy vertical section navigation code 
{% from "section-navigation/macro.njk" import sectionNavigation %}

{{ sectionNavigation({
  "variants": "vertical",
  "id": "section-menu",
  "currentPath": "#section-6",
  "sections":[
    {
      "title": "Section Title",
      "itemsList": [
        {
          "title": "Section 1",
          "url": "#section-1",
          "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 2",
          "url": "#section-2"
        },
        {
          "title": "Section 3",
          "url": "#section-3"
        },
        {
          "title": "Section 4",
          "url": "#section-4"
        }
      ]
    },
    {
      "title": "Section Title",
      "itemsList": [
        {
          "title": "Section 5",
          "url": "#section-5"
        },
        {
          "title": "Section 6",
          "url": "#section-6",
          "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 7",
          "url": "#0"
        },
        {
          "title": "Section 8",
          "url": "#0"
        }
      ]
    }
  ]
}) }}
Close vertical section navigation code