Props

Leading Icon

Toggle: Assign glyph to add visual description of tabs. Uses 24-icon.

Count

Display count component to highlight the number of items within tabs.

Navigational Arrows

Display interactive arrows to allow guests to navigate between tabs.

States

Usage

Sticky

When the tab bar reaches the top of viewport, it locks to the top and remain there while viewing tabbed content within.

Navigational arrows

When the number of tabs exceeds the available horizontal space, navigational arrows will appear to allow scrolling through the tabs. This ensures all tab options remain accessible, even on smaller viewports.

Do

• Use to switch between different groups of content within the same context
• Contain 2-5 groups of content
• Follow a logical order that guests are familiar with
• Be arranged in order of importance
• Have labels that are short, succinct and guide the guest

Don't

• Solely used for the purpose of reducing page length/scroll. Alternate patterns or breaking out to individual pages should be considered.
• Have poorly chunked content because it may lead to interaction cost and cognitive overload
• Have more than 5 labels because it may lead to interaction cost and cognitive overload. Consider restructuring your content.