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.
Code reference
When to use
Tabs should be used for content that covers different facets of the same topic, displayed in the same context. They are the digital equivalent of flipping through notecards—all the tabs are organized together, but each contains its own content.
It's best to make sure all your tabs share the same organizing principle. For instance: all your tabs could all be actions like "Finding parking," "registering a bike" and "Buying a meal card," or organized chronologically: "past events," "current and ongoing events" and "future events."
Avoid using tabs when users would benefit from seeing all of your content at once. The content on different tabs shouldn't depend on appearing simultaneously with other content. If your information would be best displayed all together in a chart or table, then it's probably best to display it that way, and not in tabs.
How to use
- Access t4.vcu.edu and navigate to the page you would like to update.
- Use the T4 content type “Plugin - Tab Panel.”
- Enter content into the required name, title and content elements.
Tips
- Tabs text-labels should succinctly describe the content of the tab they represent. Keep your tab labels short to avoid a cluttered look.
- Tabs can include anything you could include in a WYSIWYG, such as bullets, lists and images.
- Use parallel design for the layout of all your tabs—the content inside of each should be structured in a similar way to avoid confusion on the part of the user.
- The user's selected tab will automatically display in a highlighted white with a blue border, while unselected tabs will display as gray.
- If the tabs span farther than the main column width, the tab navigation becomes horizontally scrollable.
Requirements
All tabs require:
- A name (will only be visible in T4)
- A title (this is what users will see in the tab label)
- Some content inside the WYSIWYG editor (this displays when the tab is selected)
Accessibility considerations
Navigating with keyboard
When a tab is focused, it will open its corresponding panel and if the nav is scrollable, it will smoothly scroll the tab to the center of the nav. It will also begin listening for keydown events when focused for the following keyboard navigation with its group:
- Home key: Open the first tab's panel.
- Left key: Open the previous tab's panel. If the current tab is the first, open the last tab's panel.
- Right key: Open the next tab's panel. If the current tab is the last, open the first tab's panel.
- End key: Open the last tab's panel.