Tabs
Organize related content into selectable panels
This component allows users to switch between sections of content without leaving the page.
Example page context showing where Tabs is typically used
✓ Use this component when:
- You need to present related content within the same visual space
- Users benefit from switching between clearly defined sections
- Content categories are mutually exclusive
- All sections are of similar importance
✕ Avoid using this component when:
- Users need to compare content side by side (use Columns)
- Content should be scanned vertically (use Accordion or headings)
- Panels contain significantly different content lengths
- The number of tabs becomes large
Choosing Between Similar Components
If your goal is…
| Your goal | Use this component |
|---|---|
Switch between related sections in the same space | Tabs |
Hide and reveal related details | Accordion |
Display content side by side | Columns |
Organize high-level page sections | Headings |
Tabs overview
A Tabs component is a set of layered content panels with tab controls to support navigation between panels. Tabs are often used to provide a collection of related content within a single component, to conserve space and reduce scrolling.
Example of Tabs
For our Tabs examples, we feature foundational principles of universal design, to guide accessible and inclusive design and development of digital products and services.
Principles
- Equitable Use: The design is useful and marketable to people with diverse abilities.
- Flexibility in Use: The design accommodates a wide range of individual preferences and abilities.
- Simple and Intuitive Use: Use of the design is easy to understand, regardless of the user’s experience, knowledge, language skills, or current concentration level.
- Perceptible Information: The design communicates necessary information effectively to the user, regardless of ambient conditions or the user’s sensory abilities.
- Tolerance for Error: The design minimizes hazards and the adverse consequences of accidental or unintended actions.
- Low Physical Effort: The design can be used efficiently, and comfortably, and with a minimum of fatigue.
- Size and Space for Approach and Use: Appropriate size and space is provided for approach, reach, manipulation, and use regardless of user’s body size, posture, or mobility.
About
The Principles of Universal Design were developed in 1997 by a multidisciplinary team at North Carolina State University. Universal design (UD) is defined as “the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.”
The Principles were compiled by advocates of Universal Design (listed in alphabetical order): Bettye Rose Connell, Mike Jones, Ron Mace, Jim Mueller, Abir Mullick, Elaine Ostrof, Jon Sanford, Ed Steinfeld, Molly Story, Gregg Vanderheiden. The Principles are copyrighted to the Center for Universal Design, School of Design, State University of North Carolina at Raleigh, USA. universaldesign.ie/about‑universal‑design/the‑7‑principles
Elements of Tabs
| Element | Purpose |
|---|---|
Tab label and panel heading | Describes the tab panel and serves as the tab control label |
Panel | Contains the tab panel content, which can include formatted text, images, and links as well as other components |
Guidance on using Tabs
- Use to group related content. Use a tabs component to present related content that users can review without having to scroll or change pages.
- Use for secondary content. Don’t section content into a tabs component when users must access and work with all content sections at once.
- Group content into categories. Provide complete details for each topic in a single tab panel. Don’t make users navigate through multiple tabs to get the information they need.
- Limit the number of categories. Avoid using a tabs component for multi-category topics that will require more than a few tab panels.
- Use short headings. Think of tab headings as menu items. Use one or two words that describe the topic of the tab panel content and also work well as the tab control label.
- Foreground important content. The first tab panel will be visible when the page loads. Use that panel for the most relevant information. Use other tab panels for content that is less relevant or that may only be needed occasionally.
- Validate the approach with users. Test with users to ensure hiding content in tab panels does not interfere with task completion.
Content guidelines
Write clear, descriptive labels
Tab labels should stand alone and be easily understood.
Keep panel content focused
Each panel should contain a single topic.
Maintain consistent structure
Use consistent formatting across panels to support usability.
Accessibility considerations
- Ensure keyboard accessibility for tab navigation
- Maintain logical focus order
- Use clear, descriptive tab labels
- Avoid relying solely on color to indicate the active tab
Tabs features
| Features | Standards |
|---|---|
Optimized color contrast | Minimum Contrast |
Headings used as tab control labels | Control Names |
Border provided for tab panels and control | Element Borders |
Sans serif typeface used for tab control labels | Wayfinding Font |
Controls receive focus a logical sequence | Focus Order |
Tabs Showcase
This example shows two basic tab panels provided with short labels for tab controls and panel headings.