Tabs – Help Center

Sometimes needs arise where it’s helpful to group different types of content in a limited space. This can help the user experience, and it can also be used to conserve space, or a pattern’s height and complexity.

Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<ul class="js-tabs">
  <li data-title="...">...</li>
  <li data-title="...">...</li>
  <li data-title="...">...</li>
</ul>

To create fitted tabs, add data-fitted="true" to the list. By default, this will add a modifier of Tabs-navigation--fitted to the tabs navigation list.

Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<ul class="js-tabs" data-initial="1" data-fitted="true">
  <li data-title="...">...</li>
  <li data-title="...">...</li>
</ul>

$('.js-tabs').tabs({
  initial: 0,
  fitted: false,
  classNames: {
    container: 'tabs',
    navigation: 'tabs__navigation',
    list: 'tabs__list'
  },
  modifiers: {
    fitted: '--fitted'
  }
});

The tab navigation style can be used outside of the Tabs plugin.

<ul class="tabs__navigation">
  <li><a href="#" class="is-active">...</a></li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>