Tabs

Use Bootstrap’s JavaScript tabs to divide your content visually.


<tabs>
  <tab-pane title="UI/UX Design"></tab-pane>
  <tab-pane title="Programming"></tab-pane>
  <tab-pane title="Graphic"></tab-pane>
</tabs>

Circle nav pills

<div>
  <tabs :fill="false" circle>
      <tab-pane>
          <span slot="title" class="nav-link-icon d-block"><i class="ni ni-atom"></i></span>
      </tab-pane>
      <tab-pane>
          <span slot="title" class="nav-link-icon d-block"><i class="ni ni-chat-round"></i></span>
      </tab-pane>
      <tab-pane>
          <span slot="title" class="nav-link-icon d-block"><i
                  class="ni ni-cloud-download-95"></i></span>
      </tab-pane>
  </tabs>
</div>

Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.

<tabs fill class="flex-column flex-md-row">
    <card shadow>
        <tab-pane>
            <span slot="title">
                <i class="ni ni-cloud-upload-96">
                Home
            </span>
            <p class="description">Raw denim you probably haven't heard of them jean shorts
                Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache
                cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
                keffiyeh dreamcatcher synth.</p>
        </tab-pane>

        <tab-pane title="Profile">
            <span slot="title">
                <i class="ni ni-bell-55 mr-2">
                Profile
            </span>
            <p class="description">Cosby sweater eu banh mi, qui irure terry richardson ex
                squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan
                american apparel, butcher voluptate nisi qui.</p>
        </tab-pane>

        <tab-pane>
             <span slot="title">
                <i class="ni ni-calendar-grid-58">
                Messages
              </span>
            <p class="description">Raw denim you probably haven't heard of them jean shorts
                Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache
                cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
                keffiyeh dreamcatcher synth.</p>
        </tab-pane>
    </card>
</tabs>

Tabs props

Prop Name Type Default Description
type String N/A Tabs type (primary|info|danger|default|warning|success)
pills Boolean true Whether tabs are pills
circle Boolean N/A Whether tabs are circle
fill Boolean true Whether to fill each tab
activeTab String N/A Default active tab name
tabNavWrapperClasses String | Object N/A Tab Nav wrapper (div) css classes
tabNavClasses String | Object N/A Tab Nav (ul) css classes
tabContentClasses String | Object N/A Tab content css classes
icons Boolean N/A Whether tabs should be of icon type (small no text)
centered Boolean N/A Whether tabs are centered
value String N/A Initial value (active tab)

Tab Pane props

Prop Name Type Default Description
title N/A N/A
id N/A N/A
label N/A N/A