Nav Tabs

Nav Tabs Scroll

Horizontally scrolling tabs in mobile view.

Dropdown functionality in mobile requires the module nav-tabs-scroll-dropdown.js. Include <script src="../../js/nav-tabs-scroll-dropdown.js"></script> inside the head tag at the top of your page and initialize the dropdowns with $('.nav-tabs-scroll').navTabsScrollDropdown();. The dropdown markup must be duplicated and appended right after nav-tabs-scrollbar. Link the dropdown-toggle and the dropdown by matching data-nav-tabs-scroll-target with the dropdown id.

Fields:

Single origin, extra id beans, eu to go, skinny americano ut aftertaste sugar. At americano, viennese variety iced grounds, grinder froth and pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain affogato organic cappuccino java plunger pot. Single shot variety pumpkin spice seasonal skinny barista carajillo robust cream.

Settings:

Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction, id trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny milk beans macchiato carajillo espresso. Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.

Forms:

Applications:

<script src="../../js/nav-tabs-scroll-dropdown.js"></script>

<div class="nav-tabs-scroll">
    <div class="nav-tabs-scrollbar">
        <ul class="nav nav-tabs nav-tabs-default">
            <li class="active" role="presentation"><a aria-controls="fields" href="#fields04" data-toggle="tab" role="tab">Fields</a></li>
            <li role="presentation"><a aria-controls="settings" href="#settings04" data-toggle="tab" role="tab">Settings</a></li>
            <li class="disabled" role="presentation"><a href="#documents">Documents</a></li>
            <li role="presentation"><a aria-controls="forms" data-toggle="tab" href="#forms04" role="tab">Forms</a></li>

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" data-nav-tabs-scroll-target="#navTabsScrollDropdown01" href="#1">Configuration <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#1">Setup</a></li>
                    <li><a href="#1">Supported Clients</a></li>
                    <li><a href="#1">Permissions</a></li>
                    <li><a href="#1">Sharing</a></li>
                    <li class="divider"></li>
                    <li><a href="#1">Scope</a></li>
                </ul>
            </li>

            <li role="presentation"><a aria-controls="applications" data-toggle="tab" href="#applications04" role="tab">Applications</a></li>
        </ul>
    </div>

    <ul class="dropdown-menu" id="navTabsScrollDropdown01">
        <li><a href="#1">Setup</a></li>
        <li><a href="#1">Supported Clients</a></li>
        <li><a href="#1">Permissions</a></li>
        <li><a href="#1">Sharing</a></li>
        <li class="divider"></li>
        <li><a href="#1">Scope</a></li>
    </ul>

    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active fade in" id="fields04">
            <p style="padding: 10px;">Single origin, extra id beans, eu to go, skinny americano ut aftertaste sugar. At americano, viennese variety iced grounds, grinder froth and pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain affogato organic cappuccino java plunger pot. Single shot variety pumpkin spice seasonal skinny barista carajillo robust cream.</p>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="settings04">
            <p style="padding: 10px;">Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction, id trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny milk beans macchiato carajillo espresso. Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.</p>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="forms04">
            <p style="padding: 10px;">Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction, id trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny milk beans macchiato carajillo espresso. Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.</p>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="applications04">
            <p style="padding: 10px;">Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction, id trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny milk beans macchiato carajillo espresso. Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.</p>
        </div>
    </div>
</div>

<script>
    $('.nav-tabs-scroll').navTabsScrollDropdown();
</script>

Nav Tabs

Nav Tabs Default

Alternate nav-tabs style.

Nav Tabs Justified

Nav Tabs Grid

Use bootstrap's grid inside list items in nav-tabs. It doesn't collapse in mobile.

<ul class="nav nav-tabs">
    <li class="col-xs-3">...</li>
    <li class="col-xs-3">...</li>
    <li class="col-xs-3">...</li>
    <li class="col-xs-3">...</li>
</ul>