Vue Navs

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

Nav pills

<tabs pills fill>
  <tab-pane active>
      <template slot="label">
          UI/UX Design
      </template>
  </tab-pane>
  <tab-pane>
      <template slot="label">
          Programming
      </template>
  </tab-pane>
  <tab-pane>
      <template slot="label">
          Graphic
      </template>
  </tab-pane>
</tabs>

Circled nav pills

<tabs pills circle type="primary" class="row">
    <tab-pane>
      <template slot="label">
          <i class="ni ni-atom"></i>
      </template>
    </tab-pane>
    <tab-pane label="Settings">
      <template slot="label">
          <i class="ni ni-chat-round"></i>
      </template>
    </tab-pane>
    <tab-pane label="Download">
      <template slot="label">
          <i class="ni ni-cloud-download-95"></i>
      </template>
    </tab-pane>
</tabs>

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.

<tabs pills fill type="primary">
  <tab-pane active>
      <template slot="label">
          <i class="ni ni-cloud-upload-96 mr-2"></i> Home
      </template>
      <p>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>

      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
  </tab-pane>
  <tab-pane>
      <template slot="label">
          <i class="ni ni-bell-55 mr-2"></i> Profile
      </template>
      <p> 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>
      <template slot="label">
          <i class="ni ni-calendar-grid-58 mr-2"></i> Messages
      </template>
      <p>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>
</tabs>

Just Icons

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.

Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.

Dramatically maintain clicks-and-mortar solutions without functional solutions.

Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.

Dynamically innovate resource-leveling customer service for state of the art customer service.

<div class="row">
  <div class="col-md-6">
    <tabs pills circle type="warning" vertical class="row">
        <tab-pane>
          <template slot="label">
              <span class="nav-link-icon d-block"><i class="ni ni-atom"></i></span>
          </template>
          <p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically
          procrastinate B2C users after installed base benefits.</p>
          <br/>
          <p>Dramatically visualize customer directed convergence without revolutionary ROI.</p>
        </tab-pane>
        <tab-pane label="Settings">
          <template slot="label">
              <i class="ni ni-settings-gear-65"></i>
          </template>
          <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize
          timely deliverables for real-time schemas.</p>
          <br/>
          <p>Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
        </tab-pane>
    </tabs>
  </div>
  <div class="col-md-6">
    <tabs pills circle type="success">
        <tab-pane>
          <template slot="label">
              <i class="ni ni-cloud-upload-96"></i>
          </template>
          <p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically
            procrastinate B2C users after installed base benefits.</p>
          <br/>
          <p>Dramatically visualize customer directed convergence without revolutionary ROI.</p>
        </tab-pane>
        <tab-pane>
          <template slot="label">
              <i class="ni ni-bell-55"></i>
          </template>
          <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize
          timely deliverables for real-time schemas.</p>
          <br/>
          <p>Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
        </tab-pane>
        <tab-pane>
          <template slot="label">
              <i class="ni ni-calendar-grid-58"></i>
          </template>
          <p>Completely synergize resource taxing relationships via premier niche markets.
          Professionally cultivate one-to-one customer service with robust ideas.</p>
          <br/>
          <p>Dynamically innovate resource-leveling customer service for state of the art
          customer service.</p>
        </tab-pane>
    </tabs>
  </div>
</div>