Navigation

Our navigation component is a collection of pill-shaped buttons that respond gracefully to various window sizes and parent containers.

Classes

Class	Applies to	Description
`.s-navigation`	N/A	Base parent container for navigation
`.s-navigation__muted`	`.s-navigation`	Secondary navigation style. To be used on pages that already have a primary navigation
`.s-navigation__scroll`	`.s-navigation`	When the navigation items overflow the width of the component, enable horizontal scrolling. By default, navigation items will wrap
`.s-navigation__sm`	`.s-navigation`	Tightens up the overall spacing and reduces the text size
`.s-navigation--item`	Child of `.s-navigation`	The individual pill-shaped link in a navigation
`.is-selected`	`.s-navigation--item`	Applies to a navigation item that’s currently selected / active

Examples

Care should be taken to only include at most one primary and one secondary navigation per page. Using multiple navigations with the same style can cause user confusion.

Forcing a navigation to scroll is an established pattern on mobile devices, so it may be appropriate to use it in that context. Wrapping tends to make more sense on larger screens, where the user isn’t forced to scroll passed a ton of navigation chrome.

Default

<div class="s-navigation">
    <a href="…" class="s-navigation--item is-selected">Product</a>
    <a href="…" class="s-navigation--item">Email</a>
    <a href="…" class="s-navigation--item">Content</a>
    <a href="…" class="s-navigation--item">Brand</a>
    <a href="…" class="s-navigation--item">Marketing</a>
</div>

Full width

Wrapped

Muted

<div class="s-navigation s-navigation__muted">
    <a href="…" class="s-navigation--item is-selected">Product</a>
    <a href="…" class="s-navigation--item">Email</a>
    <a href="…" class="s-navigation--item">Content</a>
    <a href="…" class="s-navigation--item">Brand</a>
    <a href="…" class="s-navigation--item">Marketing</a>
</div>

Full width

Wrapped

Scrolling

<div class="s-navigation s-navigation__scroll">
    <a href="…" class="s-navigation--item is-selected">Product</a>
    <a href="…" class="s-navigation--item">Email</a>
    <a href="…" class="s-navigation--item">Content</a>
    <a href="…" class="s-navigation--item">Brand</a>
    <a href="…" class="s-navigation--item">Marketing</a>
</div>

Small

<div class="s-navigation s-navigation__sm">
    <a href="…" class="s-navigation--item is-selected">Product</a>
    <a href="…" class="s-navigation--item">Email</a>
    <a href="…" class="s-navigation--item">Content</a>
    <a href="…" class="s-navigation--item">Brand</a>
    <a href="…" class="s-navigation--item">Marketing</a>
</div>