Tabs

Tabs are used to group related content. Tabs are usually placed directly on top of a group box, grid or input module. Read more about tabs in the UX Guidelines. Make sure to also check out the guidelines for tab order.

Use when

To present related information in separate views
To structure, split up and display information in a limited area

For this component you need JavaScript! We recommend to create your own scripts following the structure from the examples below.
You can also use the scripts we use for our examples. For this case - tabs - you need to use tabdrop.js and dropdowns.js.

Basic/default design

Tab content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum sit amet ligula luctus volutpat. Cras quis scelerisque quam, in hendrerit urna. Vivamus suscipit ligula neque. Praesent malesuada cursus augue, a ultricies eros rutrum non. Vivamus commodo elementum tortor sed fermentum. Aliquam erat volutpat. Nunc vitae libero mattis, commodo libero quis, elementum felis. Vivamus at justo vel est viverra ultrices. Curabitur vitae mauris volutpat massa dapibus viverra.

Donec nulla dui, cursus sit amet consectetur sit amet, congue at orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque suscipit nisi in ante volutpat molestie. Aliquam aliquam lectus ac lorem ultrices vulputate. Praesent efficitur placerat nibh id malesuada. In ac turpis vitae sem consequat condimentum. Curabitur condimentum arcu vel mollis lobortis. Nam mollis ex ac consectetur hendrerit. Integer quis orci accumsan, posuere risus eu, posuere ex. Interdum et malesuada fames ac ante ipsum primis in faucibus.

					

<div class="nav nav-tabs" role="tablist" aria-label="Sample Tabs">
    <div class="nav-item">
        <a id="normal-tab" tabindex="0" role="tab" data-toggle="tab" aria-controls="normal" aria-selected="false">Normal</a>
    </div>
    <div class="nav-item disabled">
        <a id="disabled-tab" tabindex="-1" role="tab" data-toggle="tab" aria-controls="disabled" aria-selected="false">Disabled</a>
    </div>
    <div class="nav-item active">
        <a> id="selected-tab" tabindex="0" role="tab" data-toggle="tab" aria-controls="myTabContent" aria-selected="true">Selected</a>
    </div>

    ...

    // Overflow tabs dropdown (three dots)
    <div class="dropdown tabdrop">
        <a class="dropdown-toggle" tabindex="0" data-toggle="dropdown">
            <span class="sr-only">Toggle dropdown</span>
        </a>
        <ul class="dropdown-menu" role="menu">
            <li>
                <a id="normal-tab2" tabindex="0" role="tab" data-toggle="tab" aria-controls="normal2" aria-selected="false">Normal</a>
            </li>
            ...
        </ul>
    </div>
</div>

// Tab content
<div id="myTabContent" class="tab-content p-32" role="tabpanel" aria-labelledby="selected-tab" aria-hidden="false">
    ...
</div>


<!-- Or with lists - ul and li -->

<ul class="nav nav-tabs" role="tablist" aria-label="Sample Tabs">
    <li class="nav-item">
        <a id="normal-tab" tabindex="0" role="tab" data-toggle="tab" aria-controls="normal" aria-selected="false">Normal</a>
    </li>

    ...

    // Overflow tabs dropdown (three dots)
    <li class="dropdown tabdrop">
        <a class="dropdown-toggle" tabindex="0" data-toggle="dropdown">
            <span class="sr-only">Toggle dropdown</span>
        </a>
        <ul class="dropdown-menu" role="menu">
            <li></li>
            ...
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content p-32" role="tabpanel" aria-labelledby="selected-tab" aria-hidden="false">
    ...
</div>

Options

Primary

Add to your tabs main container .nav-tabs the .nav-tabs-primary class.

Tab content

					

<ul class="nav nav-tabs nav-tabs-primary" role="tablist" aria-label="Sample Tabs">
    <li class="nav-item" >
        <a id="normal-tab" tabindex="0" role="tab" data-toggle="tab" aria-controls="normal" aria-selected="false">Normal</a>
    </li>
    ...
</ul>
<div id="myTabContent" class="tab-content p-32" role="tabpanel" aria-labelledby="selected-tab" aria-hidden="false">
    ...
</div>

Justified tabs

Easily add to your tabs main container .nav-tabs the .nav-justified class.

					

<ul class="nav nav-tabs nav-justified" role="tablist" aria-label="Sample Justified Tabs">
    <li class="nav-item">
        <a id="normal-tab" tabindex="0" role="tab" data-toggle="tab" aria-controls="normal" aria-selected="false">Normal</a>
    </li>
    ...
</ul>