> For the complete documentation index, see [llms.txt](https://iron-network.gitbook.io/chankya/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iron-network.gitbook.io/chankya/ui-elements/untitled-5.md).

# Tabs

Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tab able regions with our [**tab JavaScript plugin**](https://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior)**.**

```
<ul class="nav nav-tabs mb-4" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#tab-1" role="tab" aria-controls="active" aria-expanded="true">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab-2" role="tab" aria-controls="inactive">Inactive</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
        Dropdown
        </a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#tab-3" role="tab" data-toggle="tab" aria-controls="dropdown1">Dropdown tab</a>
            <a class="dropdown-item" href="#tab-4" role="tab" data-toggle="tab" aria-controls="dropdown2">Another tab</a>
        </div>
    </li>
</ul>
<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade show active" id="tab-1">
        <p> Basic tabs example using <code>.nav-tabs</code> class. Also requires base <code>.nav</code> class. </p>
    </div>
    <div class="tab-pane fade" id="tab-2" role="tabpanel">
        <p>This style Should Apply same for all the possible variations of this sections.</p>
    </div>
    <div class="tab-pane fade" id="tab-3" role="tabpanel">
        <p> Basic tabs example using <code>.nav-tabs</code> class. Also requires base <code>.nav</code> class.</p>
    </div>
    <div class="tab-pane fade" id="tab-4" role="tabpanel">
        <p>This style Should Apply same for all the possible variations of this sections.</p>
    </div>
</div>
```