Tabs

The Tabs component organizes multiple sections of related content so a client can view one section at a time.

Usage

Tabs are used to navigate between multiple sections of related content without leaving the context of the page.

Guidelines

• There needs to be at least two Tabs buttons, but not more than seven.
• The text of each Tabs button cannot be on two lines so must be kept short.

Anatomy

• Tabs must contain Tabs buttons.
• Each Tabs button must be connected to a content panel.

Accessibility

• Clients can navigate through the Tabs with Left, Right, Up, and Down arrow keys.
• Clients can jump to the first Tabs button with Home and to the last Tabs button with End.
• The associated content panel is activated automatically when a client navigates to a new Tabs button.
• The Tab key moves the client into the content associated with the Tabs button and Shift+Tab moves focus back to the button.