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

Basic tabs example

					

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