Skip to main content

Section navigation

Navigation to move across pages from within a main section.

Open this example in a new tab  
<nav class="ons-section-nav" id="" aria-label="Section menu" role="menu">
  <ul class="ons-section-nav__list" aria-label="Navigation menu">
    <li class="ons-section-nav__item  ons-section-nav__item--active">
      <a class="ons-section-nav__link" role="menuitem" href="#section-1" aria-current="location">Section 1</a>
    </li>
    <li class="ons-section-nav__item ">
      <a class="ons-section-nav__link" role="menuitem" href="#0">Section 2</a>
    </li>
    <li class="ons-section-nav__item ">
      <a class="ons-section-nav__link" role="menuitem" href="#0">Section 3</a>
    </li>
  </ul>
</nav>
{% from "components/section-navigation/_macro.njk" import onsSectionNavigation %}
{{
    onsSectionNavigation({
        "ariaLabel": "Section menu",
        "ariaListLabel": "Navigation menu",
        "currentPath": "#section-1",
        "itemsList": [
            {
                "title": "Section 1",
                "url": "#section-1"
            },
            {
                "title": "Section 2",
                "url": "#0"
            },
            {
                "title": "Section 3",
                "url": "#0"
            }
        ]
    })
}}
Name Type Required Description
currentPath string true Path to the default active page
ariaLabel string false The aria-label added to the section navigation element. Defaults to Section menu
ariaListLabel string false The aria-label added to the section navigation list. Defaults to Section menu links
itemsList Array<Item> true An array of list items to render in the section navigation element

Item

Name Type Required Description
classes string false Additional css classes for the section navigation element
url string true The URL to the linked page
title string true The text for the link 
{% macro onsSectionNavigation(params) %}
  <nav class="ons-section-nav" id="{{ params.id }}" aria-label="{{ params.ariaLabel | default("Section menu") }}" role="menu">
      <ul class="ons-section-nav__list" aria-label="{{ params.ariaListLabel | default("Section menu links") }}">
        {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
          <li class="ons-section-nav__item {{ item.classes }}{{ ' ons-section-nav__item--active' if (item.url == params.currentPath) or (item.url in params.currentPath) or (params.tabQuery == item.title|lower) }}">
              <a class="ons-section-nav__link" role="menuitem" href="{{ item.url }}" {% if (item.url == params.currentPath) or (item.url in params.currentPath) or (params.tabQuery == item.title|lower) %} aria-current="location" {% endif %}>{{ item.title }}</a>
          </li>
        {% endfor %}
      </ul>
  </nav>
{% endmacro %}

.ons-section-nav {
  border-bottom: 1px solid $color-borders;

  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &__item {
    border-bottom: 4px solid transparent;
    display: inline-block;
    font-size: 1rem;
    margin: 0 1rem 0 0;
    text-align: center;
    &:hover,
    &--active {
      border-color: $color-night-blue;
      a {
        color: $color-night-blue;
      }
    }
    &--active {
      font-weight: 700;
    }
  }

  &__link {
    text-decoration: none;
    &:hover {
      text-decoration: none;
    }
  }
}

When to use this component

This component should be used to allow users to move between pages that are not necessarily at a global/site wide level but are within a specific context and need to be grouped at the same level.

How to use this component

This component can be implemented with main navigation in the Header component to give hierarchy to the content within a service. It can however, be used without any parent level navigation as a way to switch across pages of the same type, for example, moving between different views on a survey list (completed, to do, archived etc).

Help improve this component

Let us know how we could improve this component or share your user research findings. Discuss the ‘Section navigation’ component on GitHub 

More in ‘Components’