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

Coming soon

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.