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__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 a single navigation per page. When navigations end up being nested, it can cause user confusion, and lead to a muddled page composition.

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

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>