Tabs

Tabs are a high level navigational component that enable switching between views of related groups of content. They appear above the content they describe and consist of two primary parts: navigation items and the content they represent. Optionally, you can use the tabs wrapping div with the class of .tabs (default) for more easily grouping content together. Tabs are linked to their content part using the href attribute whos hash value contains the ID of the content it describes.

<div class="tabs style-fold">
  <nav class="tabs-nav">
    <ul>
      <li class="active"><a href="#tabs-panel-1">...</a></li>
      <li><a href="#tabs-panel-2">...</a></li>
      <li><a href="#tabs-panel-3">...</a></li>
      ...
    </ul>
  </nav>
  <div class="tabs-content">
    <div id="tabs-panel-1" class="tabs-panel active">...</div>
    <div id="tabs-panel-2" class="tabs-panel">...</div>
    <div id="tabs-panel-3" class="tabs-panel">...</div>
    ...
  </div>
</div>

Tab Content 1

Tab Content 2

Tab Content 3

Tab Content 4

Tab Content 5

Tabs can also be displayed without the wrapping .tabs element.

<nav class="tabs-nav style-fold" data-content="tabs-content-1">
  <ul>
    <li class="active"><a href="#">...</a></li>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
    ...
  </ul>
</nav>
<div class="tabs-content" id="tabs-content-1">
  <div id="#" class="tabs-panel active">...</div>
  <div id="#" class="tabs-panel">...</div>
  <div id="#" class="tabs-panel">...</div>
  ...
</div>

Tab Content 1

Tab Content 2

Tab Content 3

Tab Content 4

Tab Content 5

When not using the tabs wrapping element, you’ll need to establish the connected between the tabs navigation and the content it represents some other way. You can do this using the data attribute on the tabs navigation element (e.g. data-content="tabs-content") and the id attribute on the tabs content(e.g. id="tabs-content").

BaseWeb also has two available tab style sets that can be used using the .style-fold (shown in examples above) or .style-line classes.

<div class="tabs style-line">
  ...
</div>

Tab Content 1

Tab Content 2

Tab Content 3

Tab Content 4

Tab Content 5

JavaScript

Tabs make use of the tabs JavaScript component for their behavior. To initiate the tabs JavaScript use the init() method.

tabs.init();

For more details on how to customize and use the public methods, take a look at the tabs JavaScript documentation.

Variable Map

Tabs variables are encompassed within the ‘$tabs’ map and are used throughout all tab mixins to set default values.

$tabs: (
  'output' : true,
  'class' : 'tabs',

  'class-wrapper'       : 'tabs',
  'class-nav'           : 'tabs-nav',
  'class-content'       : 'tabs-content',
  'class-content-panel' : 'tabs-panel',

  'margin'             : 2em 0,
  'padding-nav'        : 1em,
  'padding-nav-inline' : 1em 2em,
  'padding-content'    : 1em 2em,

  'background'        : $gray-100,
  'background-fade'   : $gray-200,
  'background-accent' : $white,

  'border'            : 1px solid $gray-300,
  'border-radius'     : $border-radius,

  'color'        : $color,
  'color-fade'   : $color-light,
  'color-accent' : $blue,

  'transition' : null,

) !default;

make-tabs

Creates the base styles for a the tabs block including tab wrapper, navigation and content whos default classes are output as .tabs, .tabs-nav and .tabs-content respectivly.

@include make-tabs( $options: () );
Variable Type Default
$options Map $tabs

Example Usage

To create a custom set of tab styles, you can use the make-tabs mixin to apply the base stack order, margins and content display styles.

// Outputs the default styles using the values in the $tabs map.
@include make-tabs();

// Create tab styles using custom tab classes class:
@include make-tabs((
  'class-nav'           : 'nav',
  'class-content'       : 'content',
  'class-content-panel' : 'panel'
));

add-tab-style

Creates a predefined stylistic feel for your tabs. There are currently two presets, fold and line style tabs.

@include add-tab-style( $options: (), $style : 'fold', $class : null );
Variable Type Options Default
$options Map $tabs
$style String 'fold', 'line' 'fold'
$class String 'style-#{$style}'

Example Usage

By default, both tab styles are output using their default classes .style-fold and .style-line.

// Tabs Style: Default
@include add-tab-style('fold');

// Tabs Style: Line
@include add-tab-style('line');
<div class="tabs style-fold">
  <nav class="tabs-nav">
    ...
  </nav>
  <div class="tabs-content">
    ...
  </div>
</div>

<div class="tabs style-line">
  ...
</div>