Tabs

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.

Open tabs

Consequat nisi

Tab heading 1

Mi ut adipiscing nec porttitor a dis tempor mauris maecenas ullamcorper nisi vulputate mus massa augue et parturient felis luctus adipiscing.Vivamus suspendisse fringilla a dictum justo diam vestibulum et mollis magna mus natoque a potenti nam.

Learn more
Minim elit

Tab heading 2

Fugiat ullamco qui occaecat Lorem qui pariatur quis cillum. Duis commodo dolor ad anim cillum. Incididunt elit ullamco in laborum in. Dolor ipsum laborum nisi exercitation do aute velit. Elit veniam velit qui ex ullamco.

Get started
Officia duis

Tab heading 3

Erat malesuada a nisl ornare nam per urna in nam conubia vulputate ullamcorper felis vestibulum leo massa massa tincidunt adipiscing porttitor cubilia mattis semper ultrices felis habitasse a semper a.Condimentum ridiculus nisl ullamcorper adipiscing natoque adipiscing quam litora a suspendisse a torquent tincidunt diam ornare at.

View the info

Box tabs

Consequat nisi

Tab heading 1

Mi ut adipiscing nec porttitor a dis tempor mauris maecenas ullamcorper nisi vulputate mus massa augue et parturient felis luctus adipiscing.Vivamus suspendisse fringilla a dictum justo diam vestibulum et mollis magna mus natoque a potenti nam.

Learn more
Minim elit

Tab heading 2

Fugiat ullamco qui occaecat Lorem qui pariatur quis cillum. Duis commodo dolor ad anim cillum. Incididunt elit ullamco in laborum in. Dolor ipsum laborum nisi exercitation do aute velit. Elit veniam velit qui ex ullamco.

Get started
Officia duis

Tab heading 3

Erat malesuada a nisl ornare nam per urna in nam conubia vulputate ullamcorper felis vestibulum leo massa massa tincidunt adipiscing porttitor cubilia mattis semper ultrices felis habitasse a semper a.Condimentum ridiculus nisl ullamcorper adipiscing natoque adipiscing quam litora a suspendisse a torquent tincidunt diam ornare at.

View the info

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

View component via PatternFly Elements

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.

Examples of tabs style

Theme

Light theme tabs
Dark theme tabs
Light theme box tabs
Dark theme box tabs

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.

Open tabs orientation Open tabs orientation Open tabs 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.

Box tabs orientation Box tabs orientation Box tabs orientation

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.

Aligning content in tabs Aligning content in tabs Aligning content in tabs

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

Tab issue, not enough labels

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

Tab issue, too many

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

Tab issue, extra spacing

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

Tab issue, wrong alignment

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

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.

Overflow scroll buttons wrong
Overflow scroll buttons accordion

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

Desktop width for tabs Desktop width for tabs

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

Tablet

Desktop width for tabs Tablet width for tabs

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

Mobile

Tabs on mobile
Tabs on mobile vertical

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

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

Consequat nisi

Tab heading 1

Mi ut adipiscing nec porttitor a dis tempor mauris maecenas ullamcorper nisi vulputate mus massa augue et parturient felis luctus adipiscing.Vivamus suspendisse fringilla a dictum justo diam vestibulum et mollis magna mus natoque a potenti nam.

Learn more
Minim elit

Tab heading 2

Fugiat ullamco qui occaecat Lorem qui pariatur quis cillum. Duis commodo dolor ad anim cillum. Incididunt elit ullamco in laborum in. Dolor ipsum laborum nisi exercitation do aute velit. Elit veniam velit qui ex ullamco.

Get started
Officia duis

Tab heading 3

Erat malesuada a nisl ornare nam per urna in nam conubia vulputate ullamcorper felis vestibulum leo massa massa tincidunt adipiscing porttitor cubilia mattis semper ultrices felis habitasse a semper a.Condimentum ridiculus nisl ullamcorper adipiscing natoque adipiscing quam litora a suspendisse a torquent tincidunt diam ornare at.

View the info

Box tabs

Consequat nisi

Tab heading 1

Mi ut adipiscing nec porttitor a dis tempor mauris maecenas ullamcorper nisi vulputate mus massa augue et parturient felis luctus adipiscing.Vivamus suspendisse fringilla a dictum justo diam vestibulum et mollis magna mus natoque a potenti nam.

Learn more
Minim elit

Tab heading 2

Fugiat ullamco qui occaecat Lorem qui pariatur quis cillum. Duis commodo dolor ad anim cillum. Incididunt elit ullamco in laborum in. Dolor ipsum laborum nisi exercitation do aute velit. Elit veniam velit qui ex ullamco.

Get started
Officia duis

Tab heading 3

Erat malesuada a nisl ornare nam per urna in nam conubia vulputate ullamcorper felis vestibulum leo massa massa tincidunt adipiscing porttitor cubilia mattis semper ultrices felis habitasse a semper a.Condimentum ridiculus nisl ullamcorper adipiscing natoque adipiscing quam litora a suspendisse a torquent tincidunt diam ornare at.

View the info

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.

Tabs tab order

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

Open tabs

Open tabs spacing

Box tabs

Box tabs spacing

For feedback and bug reports concerning PatternFly Elements components, create an issue in the GitHub repository.