Navigation

Sidebar

Planned

Side navigation lets users navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation.

Options

Single Level

Use a single level side navigation for a simple or flat navigation, without a hierarchy. Choosing a navigation item will select the item and take the user to the corresponding location.

Single Level with Headers

Use a single level with headers side navigation when needing to group navigation items into categories. This variant has the same behavior as the single level side navigation, but it has headers that aren’t interactive. If items don’t fall into a category, place them at the top.

Multilevel

Use a multi-level side navigation when there are multiple layers of hierarchical navigation. Clicking on a header opens or collapses the sub-level navigation items, and in some cases also sends the user to the top-level location.

Icons

Icons can be displayed in first-level items of any type of side navigation (single level or multi-level). Use icons only when absolutely necessary: when they add essential value and have a strong association with the text. Never use icons just as decoration.

Behaviors

Example

The width of the side navigation is flexible, so choose a width that works with the navigation items in your experience. The default width is size-3000. Make the width generous enough so that it doesn’t feel too condensed. Doing this will ensure that users won't confuse the side navigation with buttons or other controls.

Example

When the navigation item text is too long for the horizontal space available, it wraps to form another line.

Implementation

Example Name

Description and implementation notes

<p> code example </p>

Information

Checklist

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard disabled).

All Color Schemes

Works properly across all color schemes (light, dark).

Accessible Contrast for Text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

Accessible Contrast for UI Components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

Defined Options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc).

Defined Behaviors

Includes guidelines for keyboard focus, layout(wrapping, truncation, overflow) animation, interactions etc.

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

Writing Guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

Internationalization Guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard Interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Design Tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

UI Kit

Includes a downloadable Figma file that shows multiple options, states, color themes, and platform scales.