Tabs

figma:ready
scss:ready
vue:ready
Usage
Code
Specs

Import

Import the settings and the tabs scss files.


@import 'settings-tools/all-settings';
@import 'components/c.tabs';

Basic usage

The creation of an Tabs component in your code is done using the following HTML structure:


<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__element mc-tabs__element--selected"
>
Tab one selected
</a>
</li>
<li class="mc-tabs__item" role="presentation">
<a href="#" role="tab" aria-selected="false" class="mc-tabs__element">
Tab two
</a>
</li>
<li class="mc-tabs__item" role="presentation">
<a href="#" role="tab" aria-selected="false" class="mc-tabs__element">
Tab three
</a>
</li>
</ul>
</div>

States

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

  • Inactive
  • Active
  • Disabled

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>

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>

With icons

To display your tabs with icons, you need to add a svg tag with the class .mc-tabs__icon inside the mc-tabs__text element.

Note that the icon used must be 24x24px in size

Without divider

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


<div class="mc-tabs mc-tabs--no-divider">...</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__element mc-tabs__element--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__element"
>
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__element"
>
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__element element must have an id attribute
  • all your mc-tabs__element 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__element 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';
@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__element-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__element element

When the tab (mc-tabs__element) 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".