Navigation
Our navigation component is a collection of buttons that respond gracefully to various window sizes and parent containers.
Classes
| Class | Description | Parent | Modifies |
|---|---|---|---|
.s-navigation | Base parent container for navigation. | N/A | N/A |
.s-navigation--item | The individual item in a navigation. | .s-navigation | N/A |
.s-navigation--avatar | Applies styling to the avatar of the navigation item. | .s-navigation--item | N/A |
.s-navigation--icon | Applies styling to the icon of the navigation item. | .s-navigation--item | N/A |
.s-navigation--item-text | The element meant to contain the text of the navigation item. | .s-navigation--item | N/A |
.s-navigation__scroll | When the navigation items overflow the width of the component, enable horizontal scrolling. By default, navigation items will wrap. This should not be applied to vertical navigations. | N/A | .s-navigation |
.s-navigation__sm | Tightens up the overall spacing and reduces the text size. | N/A | .s-navigation |
.s-navigation__vertical | Renders the navigation vertically. | N/A | .s-navigation |
.s-navigation--item__dropdown | Adds a small caret that indicates a dropdown. | N/A | .s-navigation--item |
.is-selected | Applies to a navigation item that's currently selected / active. | N/A | .s-navigation--item |
Preventing layout shift
Horizontal layout shift may occur when changing which item is selected within the navigation component. We recommend including the data-text attribute on the child navigation item text element with the value duplicating the text of the item to prevent the layout shift. See below for examples.
| Item | Description | Applied to |
|---|---|---|
data-text="[value]" | Prevents layout shift when changing selected button. Value should be the text of the navigation item. | .s-navigation--item-text |
Horizontal
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.
Horizontal default
Use the default size for primary page-level navigation, typically placed near the top of the page.
<nav aria-label="…">
<ul class="s-navigation">
<li>
<a href="…" class="s-navigation--item is-selected">
<span class="s-navigation--item-text" data-text="…">…</span>
</a>
</li>
<li>
<a href="…" class="s-navigation--item">
<span class="s-navigation--item-text" data-text="…">…</span>
</a>
</li>
</ul>
</nav>Full width
Wrapped
Icons
Use the icon variant for a prominent, secondary horizontal navigation bar that directs users to main page sections. Limit use to one per page and do not use it for in-page filtering. Icon styles should change with the state of the item (ex: selected items use a fill icon)
<nav aria-label="…">
<ul class="s-navigation">
<li>
<a href="…" class="s-navigation--item is-selected">
<svg class="s-navigation--icon" aria-hidden="true">…</svg>
<span class="s-navigation--item-text" data-text="Content">Content</span>
</a>
</li>
<li>
<a href="…" class="s-navigation--item">
<svg class="s-navigation--icon" aria-hidden="true">…</svg>
<span class="s-navigation--item-text" data-text="Topics">Topics</span>
</a>
</li>
<li>
<a href="…" class="s-navigation--item">
<svg class="s-navigation--icon" aria-hidden="true">…</svg>
<span class="s-navigation--item-text" data-text="People">People</span>
</a>
</li>
<li>
<a href="…" class="s-navigation--item s-navigation--item__dropdown">
<svg class="s-navigation--icon" aria-hidden="true">…</svg>
<span class="s-navigation--item-text" data-text="Settings">Settings</span>
</a>
</li>
</ul>
</nav>Scrolling
<nav aria-label="…">
<ul class="s-navigation s-navigation__scroll">
<li>
<a href="…" class="s-navigation--item is-selected">
<span class="s-navigation--item-text" data-text="…">…</span>
</a>
</li>
<li>
<a href="…" class="s-navigation--item">
<span class="s-navigation--item-text" data-text="…">…</span>
</a>
</li>
</ul>
</nav>Dropdown
<nav aria-label="…">
<ul class="s-navigation s-navigation__scroll">
<li>
<a href="…" class="s-navigation--item is-selected">
<span class="s-navigation--item-text" data-text="…">…</span>
</a>
</li>
<li>
<a href="…" class="s-navigation--item">
<span class="s-navigation--item-text" data-text="…">…</span>
</a>
</li>
<li>
<a href="…" class="s-navigation--item s-navigation--item__dropdown">
<span class="s-navigation--item-text" data-text="…">…</span>
</a>
</li>
</ul>
</nav>Small
Use the small variant for on-page filtering in space-constrained areas, such as controlling small lists. Avoid using icons on the small variant.
<nav aria-label="…">
<ul class="s-navigation s-navigation__sm">
<li>
<a href="…" class="s-navigation--item is-selected">
<span class="s-navigation--item-text" data-text="…">…</span>
</a>
</li>
<li>
<a href="…" class="s-navigation--item">
<span class="s-navigation--item-text" data-text="…">…</span>
</a>
</li>
</ul>
</nav>Vertical
Stacks also provides a vertical variation with support for section headers.
Vertical default
<nav aria-label="…">
<ul class="s-navigation s-navigation__vertical">
<li>
<a href="…" class="s-navigation--item is-selected">
<span class="s-navigation--item-text" data-text="…">…</span>
</a>
</li>
<li>
<a href="…" class="s-navigation--item">
<span class="s-navigation--item-text" data-text="…">…</span>
</a>
</li>
</ul>
</nav>Vertical Icons
Vertical navigation items with icons have a larger padding.
<nav aria-label="…">
<ul class="s-navigation s-navigation__vertical">
<li>
<a href="…" class="s-navigation--item is-selected">
<svg class="s-navigation--icon" aria-hidden="true">…</svg>
<span class="s-navigation--item-text" data-text="Home">Home</span>
</a>
</li>
<li>
<a href="…" class="s-navigation--item d-flex jc-space-between">
<svg class="s-navigation--icon" aria-hidden="true">…</svg>
<span class="s-navigation--item-text" data-text="Jobs">Jobs</span>
<div class="s-badge s-badge__xs s-badge__featured ml-auto">New</div>
</a>
</li>
<li>
<a href="…" class="s-navigation--item d-flex jc-space-between">
<svg class="s-navigation--icon" aria-hidden="true">…</svg>
<span class="s-navigation--item-text" data-text="Saves">Saves</span>
<div class="s-activity-indicator ml-auto">
3 <div class="v-visible-sr">new activities</div>
</div>
</a>
</li>
<li>
<a href="…" class="s-navigation--item">
<svg class="s-navigation--icon" aria-hidden="true">…</svg>
<span class="s-navigation--item-text" data-text="Users">Users</span>
</a>
</li>
</ul>
</nav>Avatar
<nav aria-label="…">
<ul class="s-navigation s-navigation__vertical">
<li>
<a href="…" class="s-navigation--item is-selected">
<div class="s-navigation--avatar s-avatar">
<img class="s-avatar--image" src="…" />
</div>
<span class="s-navigation--item-text" data-text="Humson">Humson</span>
</a>
</li>
<li>
<a href="…" class="s-navigation--item">
<div class="s-navigation--avatar s-avatar">
<img class="s-avatar--image" src="…" />
</div>
<span class="s-navigation--item-text" data-text="Samson">Samson</span>
</a>
</li>
</ul>
</nav>Titles
<nav aria-label="…">
<ul class="s-navigation s-navigation__vertical">
<li>
<h4 class="s-navigation--title" id="nav-section1">…</h4>
<ul aria-labelledby="nav-section1">
<li>
<a href="…" class="s-navigation--item is-selected">
<span class="s-navigation--item-text" data-text="…">…</span>
</a>
</li>
<li>
<a href="…" class="s-navigation--item">
<span class="s-navigation--item-text" data-text="…">…</span>
</a>
</li>
</ul>
</li>
<li>
<h4 class="s-navigation--title" id="nav-section2">…</h4>
<ul aria-labelledby="nav-section2">
<li>
<a href="…" class="s-navigation--item">
<span class="s-navigation--item-text" data-text="…">…</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>