Unit Content - Tab
The Unit Content – Tab component groups related content within up to five horizontal tabs, greatly reducing the presentation area and the need to scroll down the page. Tab labels should be short and descriptive. The content within each tab should focus on a single topic and follow proper heading hierarchy for accessibility.
On This Page
Example
Tab Label One
This is the content area for tab one. Tab content should be focused on a single topic, a reader-friendly length, and, if applicable, follow a heading structure and include a clear call to action.
You can include linking text or anchors within the content area.
Tab Label Two
This is the content area for tab two. Tab content should be focused on a single topic, a reader-friendly length, and, if applicable, follow a heading structure and include a clear call to action.
You can include linking text or anchors within the content area.
Tab Label Three
This is the content area for tab three. Tab content should be focused on a single topic, a reader-friendly length, and, if applicable, follow a heading structure and include a clear call to action.
You can include linking text or anchors within the content area.
Settings & Features
- Display options: tab label, tab content and optional anchor link name
- User can click through tabs to display related content area in full
- When activated, tab label visually changes to indicate interactivity or clickability
- User can click anywhere in the tab label to display corresponding content area or to move to another tab
- Inside the component, up to 5 tabs can be added, moved up or down, and deleted
- Anchor link to tab content areas to direct users to specific content or deep link from emails, documents and other webpages
Working with Content
Good for:
- Related content that can be split up into 2-5 chunks
- Information that's of similar value
- Reducing page length
Avoid if:
- Critical content should be immediately visible
- User might want to scan or read content in multiple tabs simultaneously
- Requires more than 5 tabs
- Overly long or difficult-to-read tab labels
Best Practices
- Tab labels should be 1 to 3 words, consistent in style and length and descriptive such as: Overview, Requirements, Costs, Faculty and Contact.
- Wordy labels like Additional Information and Resources, Important Things You Need to Know and Frequently Asked Questions About Admissions are not helpful to the site user.
- Tab content should be focused on a single topic, a reader-friendly length, and, if applicable, follow a heading structure and include a clear call to action.
- Use anchor links to link directly to a specific tab from other web pages, emails or documents. Anchor names should be all lowercase, use hyphens between words, and avoid spaces and special characters.
- Recommended maximums: 5 tabs per component, 50 characters (including spaces) per tab label and one tab component per page.
Usability & Guidelines
- Do not place critical deadlines or requirements only within tab content areas which may not be immediately viewable.
- Ensure content remains understandable when viewed independently. Users should not be required to open every tab to understand the page's primary purpose.
Alternative Options
If content is critical, requires side-by-side comparison, meant for different audiences, or the tab content areas are not related, consider another type of component for better usability, accessibility and maintenance.
| Content Need | Recommended Component |
|---|---|
| Frequently Asked Questions | Accordion |
| Explaining a sequential process | Link List |
| Separate destinations | Unit Content Card Grid or Navigation |
| Long-form content | Standard content page structure with proper heading hierarchy |