UI Elements / Supplemental Navigation

Supplemental Navigation

Supplemental navigation patterns are essential for creating usable, engaging environments. Navigation items should be simple, visible, clear and consistent.

On This Page

Breadcrumbs
Horizontal Tabs
Vertical Tabs
Button Tabs

Breadcrumbs

Breadcrumb navigation is a way for users to visualize their location on a website. It's a great way to make it easier for users to move around the site, but should only be used if it makes sense sense with your website's linear hierarchy.

Tips:

Include the full navigational path in your breadcrumbs.
Keep your breadcrumb titles consistent with your page titles.
Consider which type of breadcrumb navigation makes the most sense for your site. There are a few different types of breadcrumbs you might use—location-based, attribute-based, and history-based. Location-based breadcrumbs show the user where they are in the site's hierarchy. Attribute-based breadcrumbs show users which category their page falls into. Finally, history-based breadcrumbs show users the specific path they took to arrive at the current page.

Horizontal Tabs

Horizontal tabs are used to navigate views within a component, such as tables or data visualizations.

Basic

With Icons

States

Active

Text
Horizontal Tab - Active

Horizontal Tab - Active
Horizontal Tab - Active

Inactive

Text
Horizontal Tab - Inactive

Horizontal Tab - Active
None

Vertical Tabs

Vertical tabs are used for contextual navigation in a sidebar.

States

Active

Text
Vertical Tab - Active

Highlight
background: Blue

Inactive

Text
Vertical Tab - Inactive

Button Tabs

Button tabs are an alternate function as tabs to show one set of content or another. Teal button groups should only be used on white backgrounds.

Basic

Tab size is relative to the tab title. Each tab should be equal width, with the width determined by the length of the longest title, plus 20px padding on either side.