Mozaic

Import

Import the settings and the tabs scss files.

@import 'settings-tools/_all-settings';

@include import-font-families();

@import 'components/_c.tabs';

Basic usage

To create basic tabs, apply the following classes:

mc-tabs on a div container
mc-tabs__nav on the ul tag
mc-tabs__item on the li tag
mc-tabs__link on the a tag

<div class="mc-tabs">
  <ul class="mc-tabs__nav" role="tablist" aria-label="Example of Tabs">
    <li class="mc-tabs__item" role="presentation">
      <a
        href="#"
        role="tab"
        aria-selected="true"
        class="mc-tabs__link mc-tabs__link--selected"
      >
        Tab one selected
      </a>
    </li>
    <li class="mc-tabs__item" role="presentation">
      <a href="#" role="tab" aria-selected="false" class="mc-tabs__link">
        Tab two
      </a>
    </li>
    <li class="mc-tabs__item" role="presentation">
      <a href="#" role="tab" aria-selected="false" class="mc-tabs__link">
        Tab three
      </a>
    </li>
  </ul>
</div>

Viewport: px

<div class="example">
  <div class="mc-tabs">
    <ul class="mc-tabs__nav" role="tablist" aria-label="Tabs default">
      <li class="mc-tabs__item" role="presentation">
        <a
          href="#"
          role="tab"
          aria-selected="true"
          class="mc-tabs__link mc-tabs__link--selected"
        >
          Tab one selected
        </a>
      </li>
      <li class="mc-tabs__item" role="presentation">
        <a href="#" role="tab" aria-selected="false" class="mc-tabs__link">
          Tab two
        </a>
      </li>
      <li class="mc-tabs__item" role="presentation">
        <button type="button" role="tab" aria-selected="false" class="mc-tabs__link">
          Tab three
        </button>
      </li>
    </ul>
  </div>
</div>

States

Depending on the context of use, the tab can have several states:

Inactive
Active
Active disabled
Inactive disabled

Viewport: px

<div class="example">
  <!-- Tab Default -->
  <div class="example__item">
    <div class="mc-tabs">
      <ul class="mc-tabs__nav" role="tablist" aria-label="Tab Default">
        <li class="mc-tabs__item" role="presentation">
          <a href="#" role="tab" aria-selected="true" class="mc-tabs__link">
            Tab Default
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!-- Tab Selected -->
  <div class="example__item">
    <div class="mc-tabs">
      <ul class="mc-tabs__nav" role="tablist" aria-label="Tab Selected">
        <li class="mc-tabs__item" role="presentation">
          <a
            href="#"
            role="tab"
            aria-selected="true"
            class="mc-tabs__link mc-tabs__link--selected"
          >
            Tab Selected
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!-- Tab Disabled -->
  <div class="example__item">
    <div class="mc-tabs">
      <ul class="mc-tabs__nav" role="tablist" aria-label="Tab Disabled">
        <li class="mc-tabs__item" role="presentation">
          <a
            href="#"
            role="tab"
            aria-selected="true"
            class="mc-tabs__link mc-tabs__link--disabled"
          >
            Tab Disabled
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!-- Tab Active Disabled -->
  <div class="example__item">
    <div class="mc-tabs">
      <ul class="mc-tabs__nav" role="tablist" aria-label="Tab Active Disabled">
        <li class="mc-tabs__item" role="presentation">
          <a
            href="#"
            role="tab"
            aria-selected="true"
            class="mc-tabs__link mc-tabs__link--selected mc-tabs__link--disabled"
          >
            Tab Active Disabled
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Variations

Aligned to a container

When using tabs inside a container (e.g. a .ml-container), you must make the tabs fit the full width of the container.

To do this, simply apply the mc-tabs--full modifier to the mc-tabs element.

<div class="mc-tabs mc-tabs--full">...</div>

Viewport: px

<div class="example">
  <div class="ml-container">
    <div class="mc-tabs mc-tabs--full">
      <ul class="mc-tabs__nav" role="tablist" aria-label="Tabs in container">
        <li class="mc-tabs__item" role="presentation">
          <a
            href="#"
            role="tab"
            aria-selected="true"
            class="mc-tabs__link mc-tabs__link--selected"
          >
            Tab one selected
          </a>
        </li>
        <li class="mc-tabs__item" role="presentation">
          <a href="#" role="tab" aria-selected="false" class="mc-tabs__link">
            Tab two
          </a>
        </li>
        <li class="mc-tabs__item" role="presentation">
          <a href="#" role="tab" aria-selected="false" class="mc-tabs__link">
            Tab three
          </a>
        </li>
        <li class="mc-tabs__item" role="presentation">
          <a href="#" role="tab" aria-selected="false" class="mc-tabs__link">
            Tab four
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Full page width

When using tabs outside of a container, you may want them to fit the full width of the page.

To display your tabs in full page width, you need to apply the mc-tabs--full-centered modifier to the mc-tabs element.

Note that the tabs must always be centered in this context of use.

<div class="mc-tabs mc-tabs--full-centered">...</div>

Viewport: px

<div class="example">
  <div class="mc-tabs mc-tabs--full-centered">
    <ul class="mc-tabs__nav" role="tablist" aria-label="Tabs in Full Width">
      <li class="mc-tabs__item" role="presentation">
        <a
          href="#"
          role="tab"
          aria-selected="true"
          class="mc-tabs__link mc-tabs__link--selected"
        >
          Tab one selected
        </a>
      </li>
      <li class="mc-tabs__item" role="presentation">
        <a href="#" role="tab" aria-selected="false" class="mc-tabs__link">
          Tab two
        </a>
      </li>
      <li class="mc-tabs__item" role="presentation">
        <a href="#" role="tab" aria-selected="false" class="mc-tabs__link">
          Tab three
        </a>
      </li>
      <li class="mc-tabs__item" role="presentation">
        <a href="#" role="tab" aria-selected="false" class="mc-tabs__link">
          Tab four
        </a>
      </li>
    </ul>
  </div>
</div>

Without shadow

To display your tabs without shadow, you need to apply the mc-tabs--no-shadow modifier to the mc-tabs element.

<div class="mc-tabs mc-tabs--no-shadow">...</div>

Viewport: px

<div class="example">
  <div class="mc-tabs mc-tabs--no-shadow">
    <ul class="mc-tabs__nav" role="tablist" aria-label="Tabs default">
      <li class="mc-tabs__item" role="presentation">
        <a
          href="#"
          role="tab"
          aria-selected="true"
          class="mc-tabs__link mc-tabs__link--selected"
        >
          Tab one selected
        </a>
      </li>
      <li class="mc-tabs__item" role="presentation">
        <a href="#" role="tab" aria-selected="false" class="mc-tabs__link">
          Tab two
        </a>
      </li>
      <li class="mc-tabs__item" role="presentation">
        <button type="button" role="tab" aria-selected="false" class="mc-tabs__link">
          Tab three
        </button>
      </li>
    </ul>
  </div>

</div>

Use tabs with panes

If you need to use tabs to control (show/hide) content within the page (e.g. content in panels), this is the structure you can use:

<div class="mc-tabs">
  <ul class="mc-tabs__nav" role="tablist" aria-label="Tabs default">
    <li class="mc-tabs__item" role="presentation">
      <a href="#panel-1" id="tab-1" role="tab" aria-selected="true" aria-controls="panel-1" class="mc-tabs__link mc-tabs__link--selected">
        Tab one selected
      </a>
    </li>
    <li class="mc-tabs__item" role="presentation">
      <a href="#panel-2" id="tab-2" role="tab" aria-selected="false" aria-controls="panel-2" class="mc-tabs__link">
        Tab two
      </a>
    </li>
    <li class="mc-tabs__item" role="presentation">
      <a href="#panel-3" id="tab-3" role="tab" aria-selected="false" aria-controls="panel-3" class="mc-tabs__link">
        Tab three
      </a>
    </li>
  </ul>
</div>

<div class="your-panes-wrapper">
  <div id="panel-1" role="tabpanel" aria-labelledby="tab-1" class="your-pane-class your-pane-active-class">...</div>
  <div id="panel-2" role="tabpanel" aria-labelledby="tab-2" class="your-pane-class">...</div>
  <div id="panel-3" role="tabpanel" aria-labelledby="tab-3" class="your-pane-class">...</div>
</div>

Accessibility rules

In order to make tabbable panes accessible, be sure to implement the following :

all your mc-tabs__link element must have an id attribute
all your mc-tabs__link element must have a aria-controls whose value is the same as the id of the associated panel
all your panel element must have an id attribute
all your panel element must have a role="tabpanel" attribute
all your panel element must have an aria-labelledby attribute whose value is the same as the id of the associated mc-tabs__link element

Warning

Mozaic doesn't provide you the CSS to show/hide your panels for the moment. It is therefore your responsibility to implement this behavior.

Specific behaviour

In contexts where the device is not swipe compatible, you can use a select list instead of the "traditional" tabs.

To do this, you just need to use the Mozaic Select component, by including it in a .mc-tabs container.

Import

@import 'settings-tools/_all-settings';

@include import-font-families();

@import 'components/_c.tabs';
@import 'components/_c.select';

Usage

As you can see in the example below, a mc-tabs--dropdown modifier is associated with the mc-tabs class.

Please also note the use of the mc-tabs__select class on the mc-select element.

<div class="mc-tabs mc-tabs--dropdown">
  <select id="tabs" class="mc-select mc-tabs__select">
    <option value="">-- Choose an option --</option>
    <option value="option1">Tab one</option>
    <option value="option2">Tab two</option>
    <option value="option3">Tab three</option>
  </select>
</div>

Javascript behaviour

To properly use the tabs, you must add javascript in order to adapt the behavior of the component according to the user's actions.

Your javascript code must perform the following actions when the user clicks on a tab:

remove the mc-tabs__link-selected class from its location and add it only on the new active tab.
make the aria-selected attribute have a value equal to true only on the new active tab, and a value equal to false on the rest of the tabs.

Accessibility and semantic

The implementation of the tabs complies with certain rules that must be implemented to guarantee the accessibility of the component.

To do this, one or more attributes must be added to the HTML elements of the component.

On the container

Make sure that the (mc-tabs__nav) tabs container complies with the following rules:

Always use the role="tablist" attribute on the .mc-tabs__nav element

Add an attribute aria-label="Example of Tabs" on the element to provide a description indicating the purpose of the set of tabs

On the li element

Each item (.mc-tabs__item) must have the attribute role="presentation"

On the tab

Always use the role="tab" attribute on each mc-tabs__link element

When the tab (mc-tabs__link) is selected, it must have the attribute aria-selected="true"
Conversely when the tab is not active, the value of the attribute aria-selected must be "false".

Tabs

Import

Basic usage

States

Variations

Aligned to a container

Full page width

Without shadow

Use tabs with panes

Specific behaviour

Dropdown navigation

Import

Usage

Javascript behaviour

Accessibility and semantic

On the container

On the li element

On the tab