Component: Tabs

Summary

Tabs help organize content into separate sections while keeping the interface clean and easy to navigate.

By dividing information into meaningful sections, tabs improve usability and reduce cognitive load. Well-designed tabs enhance user experience by keeping content easily accessible while maintaining a clean, uncluttered layout.

What's a Tab?

Tabs act as a navigation pattern that divides content into multiple panels, each accessible by clicking or selecting a tab. They are commonly used when users need to view different but related sets of information without opening new pages.

From a user experience perspective, a tab-based design includes the following elements:

  • List: A (traditionally horizontal) list of the available tabs
  • Label: A concise description of the content found on that tab
  • Panel: A panel displaying the selected tab’s content
  • Selection indicators: A visual signifier that marks which tab is displaying content

Examples of Tabs

  • Committees: Tabs are used in websites to separate different categories of content (e.g., "Meetings," "Members," "About").

  • Opinions: Tabs can display multiple reports within each year (e.g., "2024," "2023," "2022").

  • Help Centers: Separating topics like FAQs, Contact Information, and Tutorials.

Tab Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab Heading 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab Heading 3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tab Heading 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Benefits of Tabs

  • Reduces Clutter: Tabs prevent long pages by condensing content into organized sections.

  • Improves Readability: Prevents information overload by breaking up large content blocks.

  • Increases Efficiency: Allows users to find information quickly without excessive scrolling or navigating to a new page.

  • Enhances Usability: Helps users focus on one set of content at a time.

  • Reduces Cognitive Load: Users can focus on one section at a time without being overwhelmed.

Usability Concerns to Consider

  • Tab Overload: Too many tabs can make navigation confusing. Stick to essential categories.

  • Hidden Content: Since only one tab’s content is visible at a time, users may overlook important information.

  • Lack of Context: Ensure tab labels are clear and descriptive to avoid user confusion.

  • Accessibility Issues: Tabs should be keyboard-navigable and follow ARIA guidelines for screen reader compatibility.

When to Use & When to Avoid

When to Use

  • When presenting related content that users may want to switch between quickly.
  • When keeping a page compact and avoiding long scrolling.
  • When users don’t need to compare content across different tabs.

When to Avoid

  • When users must compare content across multiple sections (use tables instead).
  • When there are too many tabs, making it hard to navigate.
  • When the content inside tabs is complex and requires further navigation (use pages instead).

Best Practices

Use Tabs for Related Content

Tabs should only be used when the content within each tab is closely related. If users need to compare information across tabs, consider using a different layout such as tables or accordions.

Label Tabs Clearly

Each tab should have a concise and descriptive label that accurately represents the content inside. Avoid vague labels like “Tab 1” or “More.”

Keep the Number of Tabs Manageable

Limit the number of tabs to around 5 to 7. Too many tabs can overwhelm users and make navigation difficult. If more tabs are needed, consider grouping them under categories or using a dropdown.

Maintain Consistent Width and Order

Tabs should be evenly spaced and follow a logical order. The most frequently accessed tab should be placed first.

Keep Content Inside Tabs Simple

Avoid placing complex interactions, nested tabs, or multiple actions inside a tab. Tabs should be used for displaying content, not for completing forms or performing major actions.

Resources

Learn More

To learn more in depth about best practices for tabs, visit the NNg website for UX guidelines.

For Developers

You can visit Storybook for Inherited CSS Variables and Twig Variables for the tabs component.