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./p>

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" 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.
</div>

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top