Tabs

Required Javascript for this component is at the end of this page.

Apple
Apricot
Avocado
<Code> 
<!-- Tabs -->
<ul class="nav nav-tabs nav-justified">
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#apple">Apple</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#apricot">Apricot</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#avocado">Avocado</a>
    </li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
    <div class="tab-pane container-fluid fade" id="apple">Apple</div>
    <div class="tab-pane container-fluid active" id="apricot">Apricot</div>
    <div class="tab-pane container-fluid fade" id="avocado">Avocado</div>
</div>

With Icons

<Code> 
<!-- Tabs -->
<ul class="icon-top nav nav-tabs nav-justified">
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#movies">
            <i class="material-icons">movie_creation</i> Movies
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#music">
            <i class="material-icons">music_note</i> Music
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#pictures">
            <i class="material-icons">panorama</i> Pictures
        </a>
    </li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
    <div class="tab-pane container-fluid fade" id="movies">Movies</div>
    <div class="tab-pane container-fluid active" id="music">Music</div>
    <div class="tab-pane container-fluid fade" id="pictures">Pictures</div>
</div>
<Code> 
<!-- Tabs -->
<ul class="icon-right nav nav-tabs nav-justified">
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#movies2">
            <i class="material-icons">movie_creation</i> Movies
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#music2">
            <i class="material-icons">music_note</i> Music
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#pictures2">
            <i class="material-icons">panorama</i> Pictures
        </a>
    </li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
    <div class="tab-pane container-fluid fade" id="movies2">Movies</div>
    <div class="tab-pane container-fluid active" id="music2">Music</div>
    <div class="tab-pane container-fluid fade" id="pictures2">Pictures</div>
</div>
<Code> 
<!-- Tabs -->
<ul class="icon-bottom nav nav-tabs nav-justified">
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#movies3">
            <i class="material-icons">movie_creation</i> Movies
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#music3">
            <i class="material-icons">music_note</i> Music
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#pictures3">
            <i class="material-icons">panorama</i> Pictures
        </a>
    </li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
    <div class="tab-pane container-fluid fade" id="movies3">Movies</div>
    <div class="tab-pane container-fluid active" id="music3">Music</div>
    <div class="tab-pane container-fluid fade" id="pictures3">Pictures</div>
</div>
<Code> 
<!-- Tabs -->
<ul class="icon-left nav nav-tabs nav-justified">
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#movies4">
            <i class="material-icons">movie_creation</i> Movies
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#music4">
            <i class="material-icons">music_note</i> Music
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#pictures4">
            <i class="material-icons">panorama</i> Pictures
        </a>
    </li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
    <div class="tab-pane container-fluid fade" id="movies4">Movies</div>
    <div class="tab-pane container-fluid active" id="music4">Music</div>
    <div class="tab-pane container-fluid fade" id="pictures4">Pictures</div>
</div>

With Primary and Accent colors

Apple
Apricot
Avocado
<Code> 
<!-- Tabs with Primary and Accent Colors -->
<ul class="nav nav-tabs nav-justified accent-pink primary-blue">
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#apple1">Apple</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#apricot1">Apricot</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#avocado1">Avocado</a>
    </li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
    <div class="tab-pane container-fluid fade" id="apple1">Apple</div>
    <div class="tab-pane container-fluid active" id="apricot1">Apricot</div>
    <div class="tab-pane container-fluid fade" id="avocado1">Avocado</div>
</div>

Tabs split to multiple rows when there are too many to fit on a row

<Code> 
<ul class="nav nav-tabs nav-justified primary-blue accent-pink">
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#apple2">Apple</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#apricot2">Apricot</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#avocado2">Avocado</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#banana2">Banana</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#blackberry2">Blackberry</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#blackcurrant2">Blackcurrant</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#blueberry2">Blueberry</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#boysenberry2">Boysenberry</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#cherry2">Cherry</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#coconut2">Coconut</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#grape2">Grape</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#kiwi2">Kiwi</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#lychee2">Lychee</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#mango2">Mango</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#melon2">Melon</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#orange2">Orange</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#peach2">Peach</a>
    </li>
</ul>

Javascript

<script>
    $(function() {
        // Initialize tabs
        $('.nav-tabs').tab();

        // Add ripple to tabs
        $('.nav-tabs .nav-link').ripple();
    });
</script>

If a Tab component is inside a Modal and is already initialized on page load, Redraw it by passing the parameter: 'redraw'.

<script>
    $("#myModal").on('shown.bs.modal', function () {
        // Redraw Tabs
        $('.nav-tabs').tab('redraw');

        // Redraw ripple
        $('.nav-tabs .nav-link').ripple('redraw');
    });
</script>

On this page