Section navigation
Navigation to move across pages from within a main section.
<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"
}
]
})
}}
{% 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.
<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"
}
]
})
}}
{% 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