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:
- Home key = Open the first tab's panel.
- Left or up key = Open the previous tab's panel. If the current tab is the first, open the last tab's panel. (Left = horizontal tab alignment / Up = vertical tab alignment)
- Right or down key = Open the next tab's panel. If the current tab is the last, open the first tab's panel. (Right = horizontal tab alignment / Down = vertical tab alignment)
- End key = Open the last tab's panel
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.
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.