Tabs

Use tabs to make it easy to explore and switch between different views.

Description

A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.

Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.

The default layout for the tabs is horizontal across all screen sizes and is designed to be used with a small number of groups of content (typically 3 or less).

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-tabs;

Import JS functionality

In order to have the JS functionality of this component available, you need to include it in your project. Assuming the project is using ES6:

import tabs from 'radius/dist/m2dm/js/tabs';
tabs();

Link to Abstract/Sketch file

Download Sketch / Abstract file

Usage

Usage example

  1. Tab 1
  2. Tab 2
  3. Tab 3
1
2
3

Variations

The variations are modifier classes that can be applied on the default element.

tabs--vertical

This variant should be used when a large number of content groups is needed (more than 3). This variant will fallback to the horizontal layout on mobile to make better use of available space

  1. Tab 1
  2. Tab 2
  3. Tab 3
1
2
3

Code example

<div class="u-page-grid--responsive u-theme-contrast">
  <div class="tabs " data-tabs>
    <ol class="tablist" data-tablist>
      <li class="tablist__item"><a data-tablist-item class="tablist__link" href="#tab1">Tab 1</a></li>
      <li class="tablist__item"><a data-tablist-item class="tablist__link" href="#tab2">Tab 2</a></li>
      <li class="tablist__item"><a data-tablist-item class="tablist__link" href="#tab3">Tab 3</a></li>
    </ol>

    <div class="tabpanels">
      <div id="tab1" data-tabpanel class="tabpanels__item">
        <div class="placeholder-component">1</div>
      </div>
      <div id="tab2" data-tabpanel class="tabpanels__item">
        <div class="placeholder-component">2</div>
      </div>
      <div id="tab3" data-tabpanel class="tabpanels__item">
        <div class="placeholder-component">3</div>
      </div>
    </div>
  </div>
</div>