Props

Icon

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

Count

Display count component to highlight the number of items within 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.

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.