Overview
On some pages, and particularly micro sites and hubs, a secondary navigation is required. This is where the sub-navigation component is useful. The Sub Navigation should sit directly under the Hero and provide the user with additional menu items relevant to the context of the page.
On a page with clearly defined sections of content, this component would act as an in-page navigation, providing the user with additional menu items to navigate through the page. Additionally, it sticks to the top of the viewport when scrolling down the page.
You can also add a button to the Sub Navigation component. Visit Sub Navigation with Button for an example.
Examples
In page variation
<div class="in-page-navigation" id="in-page-navigation-test">
<div class="in-page-navigation__sticky-container" data-sticky-container>
<nav class="in-page-navigation__menu" data-myob-in-page-navigation data-top-anchor="in-page-navigation-test">
<button class="in-page-navigation__trigger"><span>Jump to...</span>
<svg aria-hidden="true" role="img" class="icon icon--chevron-b icon--xxs">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</button>
<ul class="in-page-navigation__list is-open" data-magellan data-active-class="is-active">
<li class="in-page-navigation__item">
<a href="#content-1" class="in-page-navigation__link">Content Area 1</a>
</li>
<li class="in-page-navigation__item">
<a href="#content-2" class="in-page-navigation__link">Content Area 2</a>
</li>
<li class="in-page-navigation__item">
<a href="#content-3" class="in-page-navigation__link">Content Area 3</a>
</li>
<li class="in-page-navigation__item">
<a href="#content-4" class="in-page-navigation__link">Content Area 4</a>
</li>
<li class="in-page-navigation__item">
<a href="#content-5" class="in-page-navigation__link">Content Area 5</a>
</li>
</ul>
</nav>
</div>
</div>
<div>
<div id="content-1" data-magellan-target="content-1" class="container bg-grey-100" style="height: 300px;"></div>
<div id="content-2" data-magellan-target="content-2" class="container bg-grey-300" style="height: 300px;"></div>
<div id="content-3" data-magellan-target="content-3" class="container bg-grey-100" style="height: 300px;"></div>
<div id="content-4" data-magellan-target="content-4" class="container bg-grey-300" style="height: 300px;"></div>
<div id="content-5" data-magellan-target="content-5" class="container bg-grey-100" style="height: 300px;"></div>
</div>Usage guidelines
| Dos | Don'ts |
|---|---|
 Do use link labels that clearly explain the content.
|
 Don't include both in-page links and external links in a single sub-navigation.
|
|
Except for specific circumstances, this component should only be placed below a hero.
|
Don't exceed a maximum of 6 links. Plan your page structure carefully when using it.
|
Implementation guidelines
| Name | Attribute | Description |
|---|---|---|
| Position |
data-top-anchor
|
Fix the Sub Navigation to the top of a container. Populate with container ID. Must be placed within a container with the data-sticky-container attribute.
|
| Page anchors |
data-magellan-target
|
Scroll the page position to anchor point. Populate with anchor ID. Must be placed on desired scroll to element on the page.
|