Sub Navigation

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.

Examples

In-Page variation

Example
External Link 
<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 container--bg-storm-6" style="height: 300px;"></div>
  <div id="content-2" data-magellan-target="content-2" class="container container--bg-storm-17" style="height: 300px;"></div>
  <div id="content-3" data-magellan-target="content-3" class="container container--bg-storm-6" style="height: 300px;"></div>
  <div id="content-4" data-magellan-target="content-4" class="container container--bg-storm-17" style="height: 300px;"></div>
  <div id="content-5" data-magellan-target="content-5" class="container container--bg-storm-6" style="height: 300px;"></div>
</div>

Usage guidelines

Dos Donts
do iconDo use link labels that clearly explain the content.
do-not iconDon't include both in-page links and external links in a single sub-navigation.
do iconExcept for specific circumstances, this component should only be placed below a hero.
do-not iconDon'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.