Tabs

Tabs are used to switch between views within the same context. Especially as the content grows it may be useful to split the content into smaller views.

On small displays, a view is used in which individual tabs occupy the entire line in order to work on these devices.

To see a detailed explanation of all existing helper classes, please refer to the usage table below.

Primary tabs

Primary tab

Example of a left aligned horizontal primary tab.

<div class="tabs--primary">
    <nav class="tab__nav">
        <ul>
            <li class="tab__item">
                <a href="#">
                    Tab 1
                </a>
            </li>
            <li class="tab__item">
                <a href="#" class="is-activated">
                    Tab 2
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    Tab 3
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    Tab 4
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    Tab 5
                </a>
            </li>
        </ul>
    </nav>

    <div class="tab__content">
        <h3>Primary tab</h3>
        <p>
            Example of a left aligned horizontal primary tab.
        </p>
    </div>
</div>

Primary tabs with icon

Primary tab with icon

Example of a left aligned horizontal primary tab with icon.

<div class="tabs--primary sm">
    <nav class="tab__nav">
        <ul>
            <li class="tab__item">
                <a href="#">
                    <span class="iconMdsp edit" aria-hidden="true"></span>
                    Tab 1 with a long(er) label
                </a>
            </li>
            <li class="tab__item">
                <a href="#" class="is-activated">
                    <span class="iconMdsp asset" aria-hidden="true"></span>
                    Tab 2 with a long label
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    <span class="iconMdsp personMultiple" aria-hidden="true"></span>
                    Tab 3 with an even longer label
                </a>
            </li>
        </ul>
    </nav>

    <div class="tab__content">
        <h3>Primary tab with icon</h3>
        <p>
            Example of a left aligned horizontal primary tab with icon.
        </p>
    </div>
</div>

Frameless primary tabs with icon

Frameless primary tab with icon

Example of a left aligned horizontal primary tab with icon.

<div class="tabs--primary tabs--frameless">
    <nav class="tab__nav">
        <ul>
            <li class="tab__item">
                <a href="#">
                    <span class="iconMdsp edit" aria-hidden="true"></span>
                    Tab 1
                </a>
            </li>
            <li class="tab__item">
                <a href="#" class="is-activated">
                    <span class="iconMdsp asset" aria-hidden="true"></span>
                    Tab 2
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    <span class="iconMdsp person" aria-hidden="true"></span>
                    Tab 3
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    <span class="iconMdsp delete" aria-hidden="true"></span>
                    Tab 4
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    <span class="iconMdsp types black" aria-hidden="true"></span>
                    Tab 5
                </a>
            </li>
        </ul>
    </nav>

    <div class="tab__content">
        <h3>Frameless primary tab with icon</h3>
        <p>
            Example of a left aligned horizontal primary tab with icon.
        </p>
    </div>
</div>

Secondary tabs

Secondary tab

Example of a left aligned horizontal secondary tab without icon.

<div class="tabs--secondary">
    <nav class="tab__nav">
        <ul>
            <li class="tab__item">
                <a href="#">
                    Tab 1
                </a>
            </li>
            <li class="tab__item">
                <a href="#" class="is-activated">
                    Tab 2
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    Tab 3
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    Tab 4
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    Tab 5
                </a>
            </li>
        </ul>
    </nav>

    <div class="tab__content">
        <h3>Secondary tab</h3>
        <p>
            Example of a left aligned horizontal secondary tab without icon.
        </p>
    </div>
</div>

Vertical tabs

<div class="tabs--vertical">
    <nav class="tab__nav">
        <ul>
            <li class="tab__item">
                <a href="#">
                    <div class="tab__headline">
                        Tab item with a very long text over two lines
                    </div>
                    <div class="tab__description">
                        Here you can place a nice description for the first navigation element. If the description is longer than two lines of text, the text will grow.
                    </div>
                </a>
            </li>
            <li class="tab__item">
                <a href="#" class="is-activated">
                    <div class="tab__headline">
                        Tab item
                    </div>
                    <div class="tab__description">
                        Just a short description for the second tab item.
                    </div>
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    <div class="tab__headline">
                        Tab item
                    </div>
                    <div class="tab__description">
                        This is a very long description over more than two lines to show how the item grows. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit et magna in auctor.
                    </div>
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    <div class="tab__headline">
                        Tab item
                    </div>
                    <div class="tab__description">
                        Description.
                    </div>
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    <div class="tab__headline">
                        Tab item without a description
                    </div>
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    <div class="tab__headline">
                        Tab item
                    </div>
                    <div class="tab__description">
                        Description.
                    </div>
                </a>
            </li>
        </ul>
    </nav>
    <div class="tab__content">
        This is the content of a tab item without icon.<br>
        <a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Cras hendrerit et magna in auctor. Etiam at massa at ipsum rutrum imperdiet et sollicitudin orci. Phasellus laoreet lacinia enim eu pellentesque.
    </div>
</div>

Vertical tabs with icon

<div class="tabs--vertical">
    <nav class="tab__nav">
        <ul>
            <li class="tab__item">
                <a href="#">
                    <div class="tab__headline">
                        <span class="iconMdsp speedometer" aria-hidden="true"></span>
                        Tab item with a very long text over two lines
                    </div>
                    <div class="tab__description">
                        Here you can place a nice description for the first tab item. If the description is longer than two lines of text, the text will grow.
                    </div>
                </a>
            </li>
            <li class="tab__item">
                <a href="#" class="is-activated">
                    <div class="tab__headline">
                        <span class="iconMdsp share" aria-hidden="true"></span>
                        Tab item
                    </div>
                    <div class="tab__description">
                        Just a short description for the second tab item.
                    </div>
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    <div class="tab__headline">
                        <span class="iconMdsp widget" aria-hidden="true"></span>
                        Tab item
                    </div>
                    <div class="tab__description">
                        This is a very long description over more than two lines to show how the item grows.
                    </div>
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    <div class="tab__headline">
                        <span class="iconMdsp hatMan" aria-hidden="true"></span>
                        Tab item
                    </div>
                    <div class="tab__description">
                        Description.
                    </div>
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    <div class="tab__headline">
                        A tab item without an icon and a description
                    </div>
                </a>
            </li>
            <li class="tab__item">
                <a href="#">
                    <div class="tab__headline">
                        <span class="iconMdsp announcement" aria-hidden="true"></span>
                        Tab item
                    </div>
                    <div class="tab__description">
                        Description.
                    </div>
                </a>
            </li>
        </ul>
    </nav>
    <div class="tab__content">
        This is the content of a tab item with icon.<br>
        <a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Cras hendrerit et magna in auctor. Etiam at massa at ipsum rutrum imperdiet et sollicitudin orci. Phasellus laoreet lacinia enim eu pellentesque.
    </div>
</div>

Usage

ElementClassDescription
.tab__item a .is-activated Visually labels the currently selected / active tab item.
.tabs--primary
.tabs--frameless
.tabs--secondary
.tabs--<size> Every tab group can be set to wrap into a single column (1 row per tab) instead of multiple tabs per row for different breakpoints.
This can be useful for e.g. tabs with very long labels.

Following values are possible:
  • .tabs--small
  • .tabs--medium
  • .tabs--large
Note that these helper classes always work for device widths between two breakpoints: If you want to set the breaking behaviour for small devices, medium and large, you have to apply all classes: .tabs--small, .tabs--medium and .tabs--large

Without a helper class only the smallest devices break into 1-column mode.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top