1. Docs
  2. Components
  3. Tabs
Buy Now Contact

Tabs

Tabbed-style navigation.


<div class="c-tabs"> 
    <nav class="c-tabs__list nav nav-tabs" id="myTab" role="tablist">
        <a class="c-tabs__link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
        <a class="c-tabs__link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
        <a class="c-tabs__link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
    </nav>
    <div class="c-tabs__content tab-content" id="nav-tabContent">
        <div class="c-tabs__pane active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque distinctio expedita, voluptatem ducimus quam fuga, vero atque, error laboriosam odio provident eveniet nemo reiciendis non optio, laborum enim ipsum dolorum!</div>
        <div class="c-tabs__pane" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">ducimus quam fuga, vero atque, error laboriosam odio provident eveniet nemo reiciendis non optio, laborum enim ipsum dolorum, voluptatem ducimus quam fuga, vero atque, error laboriosam odio provident eveniet nemo!</div>
        <div class="c-tabs__pane" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">optio, laborum enim ipsum dolorum, voluptatem ducimus quam fuga, vero atque, error laboriosam odio provident eveniet nemo reicienoptio, laborum enim ipsum dolorum, voluptatem ducimus quam fuga, vero atque, error laboriosam odio provident eveniet nemo reicien</div>
    </div>
</div>

Javascript

This component’s interactions are powered by Bootstrap. Refer to their tabs documentation for Javascript usage. You will notice that for certain components there is a mixture of Dashboard class names and Bootstrap class names that is because Bootstrap’s Javascript requires certain elements to have certain class names. Dashboard components does not use any of these classes for styling.

Contents: