Tabs

Tabs can be used to alternate between views within the same context, but not to navigate to different areas. Use tabs only when users don't need to see content from multiple tabs simultaneously. For ex: don’t use if users need to compare info behind different tabs.

Tab labels

  • Write short tab labels and use plain language that are easily comprehensible
  • Short labels are more scannable: tab labels should usually be 1–3 words.
  • If you need longer labels, it might be a sign that the choices are too complicated for a tab control
  • If you must use a longer label and need a second line, consider using truncated text, but only if it doesn’t impede comprehension.
<div class="tab"> <ul class="tab__nav" role="tablist"> <li class="tab__item"> <a class="active" href="" role="tab" aria-selected="true">Active Tab link</a> </li> <li class="tab__item"> <a href="" role="tab">Inactive Tab link</a> </li> <li class="tab__item"> <a class="disabled" href="" role="tab">Disable Tab link</a> </li> </ul> </div>

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.

<div class="tab"> <ul class="tab__nav" role="tablist"> <li class="tab__item"> <a class="active" data-toggle="tab" href="#tab-1" role="tab">Tab 1</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-2" role="tab">Tab 2</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-3" role="tab">Tab 3</a> </li> </ul> <div class="tab__content"> <div class="tab__pane active" id="tab-1" role="tabpanel"> <h3>Tab 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.</p> </div> <div class="tab__pane fade" id="tab-2" role="tabpanel"> <h3>Tab 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.</p> </div> <div class="tab__pane fade" id="tab-3" role="tabpanel"> <h3>Tab 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.</p> </div> </div> </div>

Tab dropdown

To avoid overwhelming the user and maintain a clean UI, the maximum number of tabs in one instance, should not exceed a total of 6. Use a dropper when tab items are more than 6 with [data-toggle="dropper"] and [data-limit="6"] to set limit visible items (not required).

Droppers are wrappers around Dropdowns. The number of items in the dropdown list are automatically adjusted depending on the parent elements width to avoid wrapping items.

<li class="tab__item" data-toggle="dropper" data-limit="6"></li>

The default text of the dropdown trigger is set to "More" if the element is empty. Add text or child element to customize the dropdown trigger.

<li class="tab__item" data-toggle="dropper" data-max="6">See more</li>

<li class="tab__item" data-toggle="dropper" data-max="6"><div>See a lot more</div></li>

Tab 1 content.
Tab 2 content.
Tab 3 content.
Tab 4 content.
Tab 5 content.
Tab 6 content.
Tab 7 content.
Tab 8 content.
Tab 9 content.
<div class="tab"> <ul id="one" class="tab__nav" role="tablist"> <li class="tab__item"> <a class="active" data-toggle="tab" href="#tab-drop-1" role="tab">Tab 1</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-drop-2" role="tab">Tab 2</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-drop-3" role="tab">Tab 3</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-drop-4" role="tab">Tab 4</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-drop-5" role="tab">Tab 5</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-drop-6" role="tab">Tab 6</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-drop-7" role="tab">Tab 7</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-drop-8" role="tab">Tab 8</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-drop-9" role="tab">Tab 9</a> </li> <li class="tab__item" data-toggle="dropper" data-max="6"></li> </ul> <div class="tab__content"> <div class="tab__pane active" id="tab-drop-1" role="tabpanel">Tab 1 content.</div> <div class="tab__pane fade" id="tab-drop-2" role="tabpanel">Tab 2 content.</div> <div class="tab__pane fade" id="tab-drop-3" role="tabpanel">Tab 3 content.</div> <div class="tab__pane fade" id="tab-drop-4" role="tabpanel">Tab 4 content.</div> <div class="tab__pane fade" id="tab-drop-5" role="tabpanel">Tab 5 content.</div> <div class="tab__pane fade" id="tab-drop-6" role="tabpanel">Tab 6 content.</div> <div class="tab__pane fade" id="tab-drop-7" role="tabpanel">Tab 7 content.</div> <div class="tab__pane fade" id="tab-drop-8" role="tabpanel">Tab 8 content.</div> <div class="tab__pane fade" id="tab-drop-9" role="tabpanel">Tab 9 content.</div> </div> </div>

Floating

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.

<div class="tab tab--floating"> <ul class="tab__nav" role="tablist"> <li class="tab__item"> <a class="active" data-toggle="tab" href="#tab-a1" role="tab">Tab 1</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-b1" role="tab">Tab 2</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-c1" role="tab">Tab 3</a> </li> </ul> <div class="tab__content"> <div class="tab__pane active" id="tab-a1" role="tabpanel"> <h3>Tab 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.</p> </div> <div class="tab__pane fade" id="tab-b1" role="tabpanel"> <h3>Tab 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.</p> </div> <div class="tab__pane fade" id="tab-c1" role="tabpanel"> <h3>Tab 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.</p> </div> </div> </div>

With dropdown

Tab 1 content.
Tab 2 content.
Tab 3 content.
Tab 4 content.
Tab 5 content.
Tab 6 content.
Tab 7 content.
Tab 8 content.
Tab 9 content.
<div class="tab tab--floating"> <ul id="two" class="tab__nav" role="tablist"> <li class="tab__item"> <a class="active" data-toggle="tab" href="#tab-floating-drop-1" role="tab">Tab 1</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-floating-drop-2" role="tab">Tab 2</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-floating-drop-3" role="tab">Tab 3</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-floating-drop-4" role="tab">Tab 4</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-floating-drop-5" role="tab">Tab 5</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-floating-drop-6" role="tab">Tab 6</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-floating-drop-7" role="tab">Tab 7</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-floating-drop-8" role="tab">Tab 8</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-floating-drop-9" role="tab">Tab 9</a> </li> <li class="tab__item" data-toggle="dropper" data-max="6"></li> </ul> <div class="tab__content"> <div class="tab__pane active" id="tab-floating-drop-1" role="tabpanel">Tab 1 content.</div> <div class="tab__pane fade" id="tab-floating-drop-2" role="tabpanel">Tab 2 content.</div> <div class="tab__pane fade" id="tab-floating-drop-3" role="tabpanel">Tab 3 content.</div> <div class="tab__pane fade" id="tab-floating-drop-4" role="tabpanel">Tab 4 content.</div> <div class="tab__pane fade" id="tab-floating-drop-5" role="tabpanel">Tab 5 content.</div> <div class="tab__pane fade" id="tab-floating-drop-6" role="tabpanel">Tab 6 content.</div> <div class="tab__pane fade" id="tab-floating-drop-7" role="tabpanel">Tab 7 content.</div> <div class="tab__pane fade" id="tab-floating-drop-8" role="tabpanel">Tab 8 content.</div> <div class="tab__pane fade" id="tab-floating-drop-9" role="tabpanel">Tab 9 content.</div> </div> </div>

Raised

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.

<div class="tab tab--floating tab--raised"> <ul class="tab__nav" role="tablist"> <li class="tab__item"> <a class="active" data-toggle="tab" href="#tab-a2" role="tab">Tab 1</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-b2" role="tab">Tab 2</a> </li> <li class="tab__item"> <a data-toggle="tab" href="#tab-c2" role="tab">Tab 3</a> </li> </ul> <div class="tab__content"> <div class="tab__pane active" id="tab-a2" role="tabpanel"> <h3>Tab 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.</p> </div> <div class="tab__pane fade" id="tab-b2" role="tabpanel"> <h3>Tab 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.</p> </div> <div class="tab__pane fade" id="tab-c2" role="tabpanel"> <h3>Tab 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim.</p> </div> </div> </div>

results matching ""

    No results matching ""