Overview
You can add a call to action button to your Sub Navigation component. You can also control if the button is shown all the time or is only visible on scroll.
Where possible limit the number of links when including a button. If you must have many links, apply the narrow spacing option to avoid undesirable wrapping of your link labels.
Examples
In page variation
<div class="in-page-navigation in-page-navigation--padding-sm" 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>
<li class="in-page-navigation__item">
<a href="#content-6" class="in-page-navigation__link">Content Area 6</a>
</li>
<li class="in-page-navigation__item in-page-navigation__item--button">
<a href="#content-6" class="btn btn--sm btn--primary">Primary Button</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 id="content-6" data-magellan-target="content-6" class="container bg-grey-300" style="height: 300px;"></div>
<div class="container bg-white" style="height: 300px;"></div>
</div>Usage guidelines
| Dos | Don'ts |
|---|---|
 When adding a button, limit the number of links and keep them as short as possible.
|
 Don't make your button label too long.
|
|
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 | Class | Description |
|---|---|---|
| Visibility |
in-page-navigation--visible-on-scroll
|
By default, the button is always visible. To show the button only when the Sub Navigation is fixed to the top of a container, add to the top-level element with the in-page-navigation class.
|
| Link spacing |
in-page-navigation--padding-sm
|
Reduce the spacing between links and the button. Must be added to the top-level element with the in-page-navigation class.
|