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 design

Basic tabs example

Options

Justified tabs

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

				
// Basic tabs
<div class="nav nav-tabs">
    <div class="nav-item" role="presentation">
        <a tabindex="0" role="tab" data-toggle="tab" aria-controls="normal">Normal</a>
    </div>
    <div class="nav-item disabled" role="presentation">
        <a tabindex="-1" role="tab" data-toggle="tab" aria-controls="disabled">Disabled</a>
    </div>
    <div class="nav-item active" role="presentation">
        <a tabindex="0" role="tab" data-toggle="tab" aria-controls="selected">Selected</a>
    </div>
        ...
    // Overflow tabs menu (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 role="presentation">
                <a tabindex="0" role="tab" data-toggle="tab" aria-controls="normal">Normal</a>
            </li>
            ...
        </ul>
    </div>
</div>
// Tab content
<div id="myTabContent" class="tab-content"></div>


// or with ul and li
<ul class="nav nav-tabs">
    <li class="nav-item" role="presentation">
        <a tabindex="0" role="tab" data-toggle="tab" aria-controls="normal">Normal</a>
    </li>
        ...
    <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 role="presentation"></li>
            ...
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content"></div>


// Justified Tabs
<ul class="nav nav-tabs nav-justified">
    <li class="nav-item" role="presentation">
        <a tabindex="0" role="tab" data-toggle="tab" aria-controls="normal">Normal</a>
    </li>
        ...
</ul>