Skip to header Skip to main navigation Skip to sub navigation Skip to main content Skip to footer

Compass Web Framework

    1. Home
    2. Components
  1. Content
  2. Tabs

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.

Content for second tab goes here. In hac habitasse platea dictumst. Donec sed tellus ut nisl vehicula vestibulum. Vivamus tristique, metus vitae luctus aliquet, risus sapien consequat lectus, vel euismod felis ligula non dui. Sed euismod nisi vel lacinia suscipit. Sed fringilla suscipit ipsum, non aliquet ligula bibendum vitae. Vivamus eu metus efficitur, porttitor tellus ut, congue neque. Ut non tortor nec quam dignissim convallis eu sed mi. Aenean nibh tortor, pellentesque eu velit tristique, maximus porta sapien. Nam consequat magna eu ante dignissim, pretium dignissim augue ultricies. Suspendisse neque lacus, posuere sed sodales ut, vehicula et nunc. Donec sit amet iaculis libero, eget feugiat ligula. Integer ex dui, dignissim at interdum cursus, volutpat non elit. Phasellus a tempor nibh, in accumsan velit. Donec imperdiet varius faucibus.

Content for third tab goes here. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce imperdiet ullamcorper nunc, id iaculis nunc imperdiet at. Curabitur eu interdum nisl. Sed at turpis sit amet ipsum vehicula elementum. Maecenas auctor mollis ante a convallis. Etiam dictum quam nec orci euismod, sed accumsan sem dignissim. Aliquam scelerisque ipsum ipsum, non dictum erat rutrum ut. Quisque fringilla eros et turpis iaculis blandit. Praesent eget blandit quam. Vivamus ut velit at tortor varius consequat. In hac habitasse platea dictumst. Fusce hendrerit ex sapien, aliquam blandit mi consectetur nec. Sed euismod suscipit tortor, ac hendrerit massa aliquam nec.

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

Tips

Requirements

All tabs require:

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:

View graphic version