Tabs
Tabs organize content, offering users the ability to navigate between groups of related content at the same level of hierarchy. By default the first tab will always display open.
When to use
- If you have sub-sections of a page and you only need to show one sub-section at a time to allow for a user to select which content is most important or relevant to them
When not to use
- If you have more than 5-6 tabs, consider using another design pattern to present content
- If the tab panel content can be displayed at once
- FAQ pages would be better suited for an accordion pattern
Anatomy
- Tab panel:
- on full-width page layouts 6 tabs would be the maximum recommended
- on pages with left navigation 5 tabs would be the maximum recommended
- if you have more than 5-6 tabs consider using another design solution to present content
- Tab label:
- tab labels should be short and descriptive and clearly set expectations for the user
- aim for no more than 2-3 words
- avoid overflowing tab labels to multiple lines
- Tab content:
- keep tab content informative and succinct
- avoid long lengths of content within tabs to avoid users getting lost in the page and unable to navigate to other tabs
- content within each tab may contain headlines, images, videos, buttons and links
Demos & variations
2-tab example
Tab 1 heading
Suspendisse potenti. Sed sagittis nibh sed diam vestibulum, non elementum enim consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quam nulla, ultrices eget nulla nec, pellentesque suscipit sapien.
Maecenas aliquam elit id ligula euismod feugiat. Sed ac luctus dui. Maecenas euismod in enim aliquam blandit. Nunc dictum erat ante, quis placerat nunc dignissim sed. Phasellus sagittis hendrerit faucibus. Nam efficitur, quam quis varius scelerisque, odio metus vehicula mi, a lobortis orci tellus eu sapien. Fusce congue vitae diam quis placerat.
Tab 2 heading
Suspendisse potenti. Sed sagittis nibh sed diam vestibulum, non elementum enim consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quam nulla, ultrices eget nulla nec, pellentesque suscipit sapien.
Maecenas aliquam elit id ligula euismod feugiat. Sed ac luctus dui. Maecenas euismod in enim aliquam blandit. Nunc dictum erat ante, quis placerat nunc dignissim sed. Phasellus sagittis hendrerit faucibus. Nam efficitur, quam quis varius scelerisque, odio metus vehicula mi, a lobortis orci tellus eu sapien. Fusce congue vitae diam quis placerat.
5-tab example
Tab 1 heading
Suspendisse potenti. Sed sagittis nibh sed diam vestibulum, non elementum enim consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quam nulla, ultrices eget nulla nec, pellentesque suscipit sapien.
Maecenas aliquam elit id ligula euismod feugiat. Sed ac luctus dui. Maecenas euismod in enim aliquam blandit. Nunc dictum erat ante, quis placerat nunc dignissim sed. Phasellus sagittis hendrerit faucibus. Nam efficitur, quam quis varius scelerisque, odio metus vehicula mi, a lobortis orci tellus eu sapien. Fusce congue vitae diam quis placerat.
Tab 2 heading
Suspendisse potenti. Sed sagittis nibh sed diam vestibulum, non elementum enim consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quam nulla, ultrices eget nulla nec, pellentesque suscipit sapien.
Maecenas aliquam elit id ligula euismod feugiat. Sed ac luctus dui. Maecenas euismod in enim aliquam blandit. Nunc dictum erat ante, quis placerat nunc dignissim sed. Phasellus sagittis hendrerit faucibus. Nam efficitur, quam quis varius scelerisque, odio metus vehicula mi, a lobortis orci tellus eu sapien. Fusce congue vitae diam quis placerat.
Tab 3 heading
Suspendisse potenti. Sed sagittis nibh sed diam vestibulum, non elementum enim consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quam nulla, ultrices eget nulla nec, pellentesque suscipit sapien.
Maecenas aliquam elit id ligula euismod feugiat. Sed ac luctus dui. Maecenas euismod in enim aliquam blandit. Nunc dictum erat ante, quis placerat nunc dignissim sed. Phasellus sagittis hendrerit faucibus. Nam efficitur, quam quis varius scelerisque, odio metus vehicula mi, a lobortis orci tellus eu sapien. Fusce congue vitae diam quis placerat.
Tab 4 heading
Suspendisse potenti. Sed sagittis nibh sed diam vestibulum, non elementum enim consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quam nulla, ultrices eget nulla nec, pellentesque suscipit sapien.
Maecenas aliquam elit id ligula euismod feugiat. Sed ac luctus dui. Maecenas euismod in enim aliquam blandit. Nunc dictum erat ante, quis placerat nunc dignissim sed. Phasellus sagittis hendrerit faucibus. Nam efficitur, quam quis varius scelerisque, odio metus vehicula mi, a lobortis orci tellus eu sapien. Fusce congue vitae diam quis placerat.
Tab 5 heading
Suspendisse potenti. Sed sagittis nibh sed diam vestibulum, non elementum enim consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quam nulla, ultrices eget nulla nec, pellentesque suscipit sapien.
Maecenas aliquam elit id ligula euismod feugiat. Sed ac luctus dui. Maecenas euismod in enim aliquam blandit. Nunc dictum erat ante, quis placerat nunc dignissim sed. Phasellus sagittis hendrerit faucibus. Nam efficitur, quam quis varius scelerisque, odio metus vehicula mi, a lobortis orci tellus eu sapien. Fusce congue vitae diam quis placerat.
Mobile
In mobile tabs collapse into accordions that allow for only one section being open at a time.