Tabs

The tabs component compartmentalizes content accessible by a tabbed button interface. Inspiration and technical guidance from the W3's example of tabs with automatic activation.

Markup

A tabs component is comprised of one or many tab/panel pairs. A tabs component is a wrapping div.cwf-tabs element with a nav.cwf-tabs__nav navigation element containing every tab (button.cwf-tabs__tab) and every panel (section.cwf-tabs__panel). A tab is tied to a panel via an aria-controls and aria-labelledby attribute respectively.

If the sum of the tab widths exceeds the width of the nav, it will begin horizontally scrolling.

Vertical tabs

If a modifier class of .cwf-tabs--left or .cwf-tabs--right is added to the wrapping div.cwf-tabs element, it will vertically align the tabs to the left or right respectively. On mobile devices, vertical tabs will revert back to the default (horizontal).

Tab alignment

If a modifier class of .cwf-tabs--start, .cwf-tabs--center, or .cwf-tabs--end is added to the wrapping div.cwf-tabs element, it will align the tabs to the start (left when horizontal, top when vertical), center, or end (right when horizontal, bottom when vertical) of the nav respectively. On mobile devices, the tab alignment will revert back to the default.

Javascript

Each tab within a tabs component is listening for focus events. When a tab is focused, it will open its corresponding panel and if the nav is scrollable, it will smooth 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:

In addition, this component is listening for hash changes. If the hash changes to the ID of a panel, it will open and focus it; This allows for linking to a given tabs panel on the same or different page without usability concerns.

T4 implementation

Tabs are implemented in T4 as the "Tab Panel" plugin, meaning its classes are .plugin- prefixed instead of .cwf- prefixed.

The plugin outputs a single tab/panel pair, and using 1 or more sequential plugins group them together as an entire tabs component.

Areas

Global or local areas are not supported by this plugin, meaning this plugin can only be used where normal content goes (e.g. the text/html content layout).

Injectors

In the "Injectors" field of the "Tab Panel" plugin, the following injectors can be used:

Examples

Default tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum egestas mi a rhoncus. Praesent at vehicula est. Curabitur faucibus, mi ut commodo fringilla, urna magna hendrerit ex, eget vehicula justo elit vel nisi. Aenean quam eros, dictum ullamcorper augue eu, sodales accumsan risus. Praesent mollis ipsum eget nisl posuere rutrum. Quisque lacus nunc, porttitor et ex at, posuere molestie turpis. Integer sodales auctor quam, nec placerat elit eleifend et. Pellentesque lacinia pulvinar leo et tincidunt. Aenean volutpat ipsum leo, a ornare lectus eleifend nec. In at risus sit amet lorem consectetur laoreet quis non libero. Quisque vulputate tellus ut vestibulum dignissim.

Center aligned tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sapien non justo venenatis laoreet. Curabitur lacus eros, aliquam vitae dolor mattis, eleifend pretium justo. Nam vitae laoreet lectus. Cras id nunc felis. Nulla semper eget augue a pharetra. Fusce lorem leo, posuere quis tempus a, feugiat quis risus. Nullam mollis aliquet ex, imperdiet pulvinar turpis vulputate in. Nulla nec ex vitae nunc varius tincidunt tempus sed felis. Donec id nulla a leo aliquet rhoncus.

Vertical tabs (left)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id enim eget ligula elementum commodo. Donec dolor enim, consequat malesuada tristique eget, dapibus elementum dui. Nunc a purus non enim ultrices ornare ac sed odio. Duis a egestas ligula, eget imperdiet mauris. Praesent finibus dolor eu porttitor vehicula. Cras nisl magna, elementum at placerat id, fringilla quis arcu. Duis viverra, risus a rutrum luctus, orci odio tincidunt odio, et egestas nisl eros nec magna. Nullam sed mi fermentum neque malesuada posuere. Donec ex sem, congue in malesuada ut, fermentum nec nisi. Donec magna enim, rutrum in feugiat eu, consectetur nec ligula.

Vertical tabs (right)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Virginia Commonwealth University Nulla lobortis tincidunt libero, sit amet ornare metus dictum eget. Donec accumsan porta ipsum, sit amet varius enim vehicula non. Nulla vestibulum leo arcu, ut convallis neque suscipit ultricies. Nulla porta venenatis enim at condimentum. Nam tristique risus porttitor facilisis molestie. Integer quis nunc lectus. Etiam pellentesque ullamcorper magna, quis ultricies risus malesuada sed. Nunc sit amet metus vel diam interdum semper vitae et enim. Pellentesque pellentesque nibh eu hendrerit pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla ante elit, sodales eget risus congue, lacinia aliquet velit. Morbi cursus, quam quis scelerisque gravida, urna ligula cursus turpis, vitae molestie elit ex bibendum elit. Sed eget risus felis. Curabitur tempor, diam at venenatis aliquet, urna neque mattis arcu, nec pulvinar ligula tellus non sem. Phasellus non augue finibus sapien tincidunt condimentum. Mauris in blandit erat.