Skip to main content

User testing

Help us improve this service. Take part in a short online exercise

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="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>
{% 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"
            }
        ]
    })
}}
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
itemsList Array<Item> true An array of list items to render in the section navigation element
variants string false Use the value vertical to display the navigation vertically

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
anchors Array<Anchors> false An array of list items to render in the section navigation element

Anchors

Name Type Required Description
url string true The ID of the H-tag to be linked to
title string true The text for the link 
{% macro onsSectionNavigation(params) %}
  <nav class="ons-section-nav{% if params.variants is defined and params.variants == 'vertical' %} ons-section-nav--vertical{% endif %}" id="{{ params.id }}" aria-label="{{ params.ariaLabel | default("Section menu") }}">
      <ul class="ons-section-nav__list">
        {% 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" 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>
              {% if item.anchors is defined and item.anchors %}
                  <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
                      {% for anchor in item.anchors %}
                          <li class="ons-section-nav__item ons-list__item">
                              <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
                          </li>
                      {% endfor %}
                  </ul>
              {% endif %}
          </li>
        {% endfor %}
      </ul>
  </nav>
{% endmacro %}

.ons-section-nav {
  &:not(&--vertical) {
    border-bottom: 1px solid $color-borders;
  }

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

  &__link {
    text-decoration: none;
    &:hover {
      color: $color-text-link-hover;
      text-decoration: underline solid $color-text-link-hover 2px;
    }
  }

  &__item {
    font-size: 1rem;
    padding: 0;
    &--active {
      border-left: 4px solid $color-text-link-active;
      font-weight: $font-weight-bold;
      margin-left: -18px;
      padding-left: 14px;
      a {
        color: $color-text-link-active;
      }
    }
    & & {
      margin-bottom: 0.3rem;
    }
  }

  &__sub-items {
    a {
      color: $color-text-link;
      font-weight: $font-weight-regular;
    }
  }

  &:not(&--vertical) & {
    &__item {
      border: none;
      border-bottom: 4px solid transparent;
      display: inline-block;
      margin: 0 1rem 0 0;
      text-align: center;
      &--active,
      &:hover {
        border-color: $color-text-link-active;
        margin: 0 1rem 0 0;
        padding: 0;
        a {
          color: $color-text-link-active;
        }
      }
    }

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

Variants

Vertical

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

Open this example in a new tab  
<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>
{% 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"
            }
        ]
    })
}}
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
itemsList Array<Item> true An array of list items to render in the section navigation element
variants string false Use the value vertical to display the navigation vertically

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
anchors Array<Anchors> false An array of list items to render in the section navigation element

Anchors

Name Type Required Description
url string true The ID of the H-tag to be linked to
title string true The text for the link 
{% macro onsSectionNavigation(params) %}
  <nav class="ons-section-nav{% if params.variants is defined and params.variants == 'vertical' %} ons-section-nav--vertical{% endif %}" id="{{ params.id }}" aria-label="{{ params.ariaLabel | default("Section menu") }}">
      <ul class="ons-section-nav__list">
        {% 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" 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>
              {% if item.anchors is defined and item.anchors %}
                  <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
                      {% for anchor in item.anchors %}
                          <li class="ons-section-nav__item ons-list__item">
                              <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
                          </li>
                      {% endfor %}
                  </ul>
              {% endif %}
          </li>
        {% endfor %}
      </ul>
  </nav>
{% endmacro %}

.ons-section-nav {
  &:not(&--vertical) {
    border-bottom: 1px solid $color-borders;
  }

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

  &__link {
    text-decoration: none;
    &:hover {
      color: $color-text-link-hover;
      text-decoration: underline solid $color-text-link-hover 2px;
    }
  }

  &__item {
    font-size: 1rem;
    padding: 0;
    &--active {
      border-left: 4px solid $color-text-link-active;
      font-weight: $font-weight-bold;
      margin-left: -18px;
      padding-left: 14px;
      a {
        color: $color-text-link-active;
      }
    }
    & & {
      margin-bottom: 0.3rem;
    }
  }

  &__sub-items {
    a {
      color: $color-text-link;
      font-weight: $font-weight-regular;
    }
  }

  &:not(&--vertical) & {
    &__item {
      border: none;
      border-bottom: 4px solid transparent;
      display: inline-block;
      margin: 0 1rem 0 0;
      text-align: center;
      &--active,
      &:hover {
        border-color: $color-text-link-active;
        margin: 0 1rem 0 0;
        padding: 0;
        a {
          color: $color-text-link-active;
        }
      }
    }

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

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’