Tab

The tab component allows you to display a simple menu, containing several links.

Basic usage

The tab component is based on the .ms-tab class. It consists of a bullet list with links.

Live Editor

<div class="ms-tab"> <ul> <li><a href="#" class="ms-active">Soccer</a></li> <li><a href="#">Basket-ball</a></li> <li><a href="#">Golf</a></li> <li><a href="#">VTT</a></li> <li><a href="#">Baseball</a></li> </ul> </div>

<div class="ms-tab">
    <ul>
        <li><a href="#" class="ms-active">Soccer</a></li>
        <li><a href="#">Basket-ball</a></li>
        <li><a href="#">Golf</a></li>
        <li><a href="#">VTT</a></li>
        <li><a href="#">Baseball</a></li>
    </ul>
</div>

Result

• Soccer
• Basket-ball
• Golf
• VTT
• Baseball

Full width

The .ms-fullwidth class allows links to take the full width of the tab.

Live Editor

<div class="ms-tab ms-fullwidth"> <ul> <li><a href="#" class="ms-active">Soccer</a></li> <li><a href="#">Basket-ball</a></li> <li><a href="#">Golf</a></li> <li><a href="#">VTT</a></li> <li><a href="#">Baseball</a></li> </ul> </div>

<div class="ms-tab ms-fullwidth">
    <ul>
        <li><a href="#" class="ms-active">Soccer</a></li>
        <li><a href="#">Basket-ball</a></li>
        <li><a href="#">Golf</a></li>
        <li><a href="#">VTT</a></li>
        <li><a href="#">Baseball</a></li>
    </ul>
</div>

Result

• Soccer
• Basket-ball
• Golf
• VTT
• Baseball