<

Voyager
Voyager

Tabs

Tabs are labelled controls that allow users to view and navigate content within a single page.

Tab A contents
Tab B contents
Tab C contents
HTML Copy 

<ul class="nav qw-nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a href="#tabPane-a" aria-controls="tabPane-a" data-toggle="tab" role="tab">Tab A</a>
    </li>
    <li role="presentation" class="active">
        <a href="#tabPane-a" aria-controls="tabPane-a" data-toggle="tab" role="tab">Tab A</a>
    </li>
    <li role="presentation" class="active">
        <a href="#tabPane-a" aria-controls="tabPane-a" data-toggle="tab" role="tab">Tab A</a>
    </li>
</ul>    
<div class="tab-content qw-box_body">
    <div id="tabPane-a" class="tab-pane qw-box p-5 active" role="tabpanel">Tab A <a href="#">contents</a></div>
    <div id="tabPane-b" class="tab-pane qw-box p-5" role="tabpanel">Tab B <a href="#">contents</a></div>
    <div id="tabPane-c" class="tab-pane qw-box p-5" role="tabpanel">Tab C <a href="#">contents</a></div>
</div>

Variants

Radius tabs

Add .qw-nav-tabs_radius to the .qw-nav-tabs when placed within a .qw-box to apply the same border radius as box container.

Tab 1 contents
Tab 2 contents
Tab 3 contents

Pseudo-tabs

Pseudo-tabs look like tabs, but they navigate between pages.