components-page

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

Single Level: Use a single level side navigation when you have simple navigation or filter options, 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 you need to group navigation or filter items into categories. This variant has the same behavior as the single-level side navigation, except that it has headers that aren’t interactive. If some items don’t fall into one of the existing categories, place them at the top.

Multi-level: Use multi-level side navigation when you have multiple layers of hierarchical navigation or filters. Clicking on a header opens or collapses the sub-level navigation/filter 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). Icons should only be used when absolutely necessary; when they add essential value and have a strong association with the text, not just as decoration. In multi-level side navigation, only the first-level items can have icons. Any sub-level items should always be text-only to ensure clear hierarchy.

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

Navigation should be helpful. Choose titles for navigation/filter items that clearly represent the surfaces where they'll go. Avoid using titles that are arbitrary or un-useful, since this can pose usability issues for your product.

Along with being descriptive, navigation items should be succinct. Reduce any unnecessary words in order to ensure simplicity. Navigation items should never be so long that they require truncation, except in instances where navigation is user-generated.

Navigation items should be written in sentence case.

Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.

Icons can be displayed in tab items. Icons should only be used in a tab item when absolutely necessary: when adding essential value and having a strong association with the label. Icons should not be used just as decoration. If the tab item does not have a visible label, it must still have a tooltip to disclose the label.

Tabs come in 2 densities: regular (default) and compact. The compact density retains the same font size, but has tighter spacing. The compact tabs are best used inside a panel, in small containers, or in mobile experiences.

Only one content section can be shown at a time. The first content tab in the switcher should be determined based on usage and should always be the default selection.