BootstrapVue Navs

Our BootstrapVue Navs component allows to create simple navigation. Navigation available in BootstrapVue shares general markup and styles, from the base .nav class to the active and disabled states.
Learn how to use BootstrapVue navigation from this documentation and navs examples to quickly and easily create elegant and flexible navs.

<div>
  <b-nav pills>
    <b-nav-item active>UI/UX Design</b-nav-item>
    <b-nav-item>Programming</b-nav-item>
    <b-nav-item>Graphic</b-nav-item>
  </b-nav>
</div>

Circled nav pills

<div>
  <b-nav pills class="nav-pills-circle">
    <b-nav-item active><i class="ni ni-atom"></i></b-nav-item>
    <b-nav-item><i class="ni ni-chat-round"></i></b-nav-item>
    <b-nav-item><i class="ni ni-cloud-download-95"></i></b-nav-item>
  </b-nav>
</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.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.

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.

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.

<div>
  <b-tabs pills>
    <b-tab active>
      <template v-slot:title>
        <i class="ni ni-cloud-upload-96 mr-2"></i> Home
      </template>
      <p class="p-3">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.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
    </b-tab>

    <b-tab>
      <template v-slot:title>
        <i class="ni ni-bell-55 mr-2"></i> Profile
      </template>
      <p class="p-3">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>
    </b-tab>

    <b-tab>
      <template v-slot:title>
        <i class="ni ni-calendar-grid-58 mr-2"></i> Messages
      </template>
      <p class="p-3">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>
    </b-tab>
  </b-tabs>
</div>

Tabs props

PROP NAME TYPE DEFAULT DESCRIPTION
type String primary  
activeTab String N/A Active tab name
tabNavWrapperClasses String / Object N/A ul wrapper css classes
tabNavClasses String / Object N/A ul css classes
tabContentClasses String / Object N/A tab content css classes
vertical Boolean N/A  
centered Boolean N/A  
value String N/A  

Tab Pane props

PROP NAME TYPE DEFAULT DESCRIPTION
id N/A N/A  
title N/A N/A  

If you want to see more examples and properties please check the official BootstrapVue Documentation.