Tabs
The tabs component allows you to group related pieces of content in a single container. Users are able to view each piece of content by using the secondary navigation which shows active tab panels and hides inactive panels.
Examples
Content for first tab goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel dolor a magna viverra laoreet vitae ut velit. Donec eu velit scelerisque, scelerisque erat id, laoreet nibh. Ut dolor mi, porttitor et dignissim vel, sollicitudin vel dolor. Cras molestie urna leo, in condimentum lacus accumsan vel. Praesent congue nunc vel ultricies iaculis. Ut pharetra lacus convallis eros pellentesque, vel sagittis sapien cursus. Fusce a nulla lacinia, semper odio nec, dignissim sapien. Donec auctor nibh eu velit lobortis, aliquet eleifend nisi consequat. Aliquam bibendum pulvinar orci. Suspendisse potenti. Suspendisse feugiat odio vel blandit faucibus. Donec faucibus accumsan ipsum et vehicula. Nulla dignissim, augue vel tincidunt lobortis, erat eros placerat urna, sit amet blandit odio lorem et lectus. Integer ac commodo nisl.
When to use
Tabs are ideal for organizing content into distinct sections under a single topic, allowing users to navigate between different facets of the content without leaving the page.
They are useful when you want to:
- Segment related information: Group content that is thematically or functionally related, such as “Finding Parking,” “Registering a Bike,” and “Buying a Meal Card.”
- Organize chronologically: Display content in a time-based sequence, such as “Past Events,” “Current and Ongoing Events,” and “Future Events.”
Avoid using tabs if:
- All content should be visible simultaneously: If the information is better understood as a whole (e.g., in a chart or table), displaying it all at once is preferable.
- Content dependence: If the content in different tabs depends on being seen together, consider an alternative layout.
How to use
- Access T4: Go to t4.vcu.edu and navigate to the page you would like to update.
- Select: Choose the “Plugin - Tab Panel” content type.
- Content: Fill in the required fields for name, title, and content for each tab.
Tips
- Label tabs clearly: Use concise and descriptive labels for each tab to ensure users understand the content it represents. Avoid lengthy labels to prevent a cluttered appearance.
- Consistency: Maintain a consistent layout and design across all tabs to enhance usability and avoid confusion. Each tab should have a similar structure and formatting.
- Content flexibility: Tabs can include a range of content elements like text, lists, and images, just like the WYSIWYG editor.
- Visual indicators: The active tab will be highlighted in white with a blue border, while inactive tabs will appear in gray.
- Horizontal scrolling: If the tabs extend beyond the main column width, users can scroll horizontally to view additional tabs.
Requirements
- Name: Provide a name for the tabs component.
- Title: Add a title (this is what users will see in the tab label)
- Content: Add content inside the WYSIWYG editor (this displays when the tab is selected)
Accessibility considerations
Navigating with keyboard
- Tab focus: When a tab is focused, it opens the corresponding panel. If the tab navigation is scrollable, it will smoothly scroll the tab into view.
- Keyboard shortcuts:
- Home key: Opens the first tab’s panel.
- Left arrow key: Opens the previous tab’s panel; loops to the last tab if currently on the first tab.
- Right arrow key: Opens the next tab’s panel; loops to the first tab if currently on the last tab.
- End key: Opens the last tab’s panel.