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--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>

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>

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>