Tabs

Overview

Tabs are used to organize and navigate between sections of content. They feature a horizontal or a vertical list of section text labels with a content panel below or to the right of the component.

Sample component

Open tabs

Box tabs

Component status

Demo

View live versions of these components and see how they can be customized.

Style

Tabs can be used in light and dark themes and there are two variants to choose from. Open tabs feature a more understated or cleaner visual style whereas Box tabs feature a familiar box or container visual style.

Theme

Orientation

Both Tab variants have horizontal and vertical orientations. The styles are the same between orientations, only the arrangement of elements is different.

Open tabs feature section text labels that float above the anchor line in the horizontal orientation or to the right of the anchor line in the vertical orientation.

Box tabs feature section text labels that are contained in a background and are aligned to the bottom of the anchor line in the horizontal orientation or to the left of the anchor line in the vertical orientation.

Usage

Tabs are used for navigating between sections of content in a contained view while staying on the same page. Tabs aren't an optimal component for comparing content simultaneously, use an Accordion instead.

Navigation

Navigating through each section should display different blocks of content, but not direct users to another page, unless they select a link in the content area.

Label formatting

Section text labels should be written concisely and be representative of the content within. Be mindful of lengthy character counts and how they can impact the appearance of both variants, especially on smaller screens or if they're translated.

Content area

A content panel is located below or to the right of the component, depending on horizontal or vertical orientation. It may contain the same elements that can also be used in other sections of the page, like text, cards, images, etc. Text shouldn’t exceed eight grid columns to maintain optimal readability.

Best practices

Tabs require at least two sections be available for users to navigate through.

Don’t use more than five section text labels in the horizontal orientation.

Don’t add extra spacing in between section text labels.

Don’t change the alignment of section text label groups.

Behavior

Section text labels

When a different section is clicked on or tapped, the active indicator bar highlights the chosen section and the content below or to the right of the component changes at the same time.

Overflow scroll buttons

Overflow scroll buttons can only be used in the horizontal orientation. They help users view any section text labels that are cut off. Don’t use lengthy or too many section text labels and be mindful of how they can impact the appearance of tabs, especially on smaller screens or if they’re translated.

Overflow scroll buttons will appear if the number of section text labels exceeds the width of either horizontal variant

Responsive design

Default avatars with text can be used on desktop and mobile. If text that's positioned on the right becomes too compressed, it will flow under and its alignment will change to centered. On mobile, Default avatars with text always stack vertically.

Mobile

Tabs can’t be used on screens that are less than 576px wide because the limited space will cause too many section text labels to get cut off. In this environment, tabs will convert to an accordion.

Breakpoints

Tabs can be used on a variety of screen sizes, but be mindful of how the group of section text labels will scale down on smaller screens.

Desktop

Large screens have lots of space where all of the section text labels can be seen

Tablet

Sometimes one or two section text labels will get cut off or break to two lines, which is acceptable

Mobile

Don’t use tabs on mobile because too many section text labels will get cut off or severely compressed

Interaction states

The interaction states in the horizontal orientation are the same as the vertical orientation of the same variant. View the live components below to experience their various interaction states.

Open tabs

Box tabs

Tab order

When the Tab key is pressed repeatedly, the focus indicator highlights each section text label from left to right in the horizontal component or from top to bottom in the vertical component.

Spacing

Tabs use PatternFly 4 spacers to define spacing values between elements.

Open tabs

Box tabs