Navs

Navigation available in Bootstrap share general markup and styles, from the base <b-nav> class to the active and disabled states. Swap modifier props to switch between each style.

<div>
  <b-nav>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

<!-- b-nav.vue -->

Overview

The base <b-nav> component is built with flexbox and provides a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling. No active states are included in the base nav.

Two style variations are supported: tabs and pills, which support active state styling. These variants are mutually exclusive - use only one style or the other.

Tab style

Make the nav look like tabs by setting the prop tabs.

<div>
  <b-nav tabs>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

<!-- b-nav-tabs.vue -->

Pill style

Use the pill style by setting the prop pills.

<div>
  <b-nav pills>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

<!-- b-nav-pills.vue -->

Fill and justify

Force your b-nav content to extend the full available width.

Fill

To proportionately fill all available space with your <b-nav-item> components, set the fill prop. Notice that all horizontal space is occupied, but not every nav item has the same width.

<div>
  <b-nav fill tabs>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Link with a long name </b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

<!-- b-nav-fill.vue -->

Justified

For equal-width elements, set prop justified instead. All horizontal space will be occupied by nav links, but unlike fill above, every <b-nav-item> will be the same width.

<div>
  <b-nav justified tabs>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Link with a long name </b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

<!-- b-nav-justified.vue -->

Vertical variation

By default <b-nav> appear on a horizontal line. Stack your navigation by setting the vertical prop.

<div>
  <b-nav vertical class="w-25">
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

<!-- b-nav-vertical.vue -->

Use <b-nav-item-dropdown> to place dropdown items within your nav.

<div>
  <b-nav pills>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item-dropdown
      id="nav7_ddown"
      text="Dropdown"
      extra-toggle-classes="nav-link-custom"
      right
    >
      <b-dropdown-item>one</b-dropdown-item>
      <b-dropdown-item>two</b-dropdown-item>
      <b-dropdown-divider />
      <b-dropdown-item>three</b-dropdown-item>
    </b-nav-item-dropdown>
  </b-nav>
</div>

<!-- b-nav-dropdown.vue -->

Sometimes you want to add your own class names to the generated dropdown toggle button, that by default have the classes nav-link and dropdown-toggle. Use the extra-toggle-classes prop to add them (like above) which will produce something like:

<li id="nav7_ddown" class="nav-item b-nav-dropdown dropdown">
  <a
    href="#"
    id="nav7_ddown__BV_button_"
    aria-haspopup="true"
    aria-expanded="false"
    class="nav-link dropdown-toggle nav-link-custom"
  />
  ...
</li>

Refer to <b-dropdown> for a list of supported sub-components.

Using in Navbar

Prop is-nav-bar has been deprecated and will be removed in a future release.

Tabbed local content support

See the <b-tabs> component for creating tabbable panes of local content (not suited for navigation).

Accessibility

If you’re using <b-nav> to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of <b-nav>, or wrap a <nav> element around <b-nav>. Do not add the role to the <b-nav> itself, as this would prevent it from being announced as an actual list by assistive technologies.

When using a <b-nav-item-dropdown> in your <b-nav>, be sure to assign a unique id prop value to the <b-nav-dropdown> so that the appropriate aria-* attributes can be automatically generated.

See Also

  • <b-tabs> to create tabbable panes of local content, even via dropdown menus.
  • <b-navbar> a wrapper that positions branding, navigation, and other elements in a concise header.
  • <b-dropdown> for sub-components that you can place inside <b-nav-item-dropdown>
  • Router Link Support reference for information about router-link specific props available on <b-nav-item>

Nav Component Reference

<b-nav>

Properties

PropertyTypeDefault Value
tagStringul
fillBooleanfalse
justifiedBooleanfalse
tabsBooleanfalse
pillsBooleanfalse
verticalBooleanfalse
is-nav-barBooleanfalse

<b-nav-item>

Properties

PropertyTypeDefault Value
hrefString
relString
targetString_self
activeBooleanfalse
disabledBooleanfalse
toString or Object
appendBooleanfalse
replaceBooleanfalse
eventString or Arrayclick
active-classString
exactBooleanfalse
exact-active-classString
router-tagStringa
no-prefetchBooleanfalse

<b-nav-text>

Properties

PropertyTypeDefault Value
tagStringspan

<b-nav-form>

Properties

PropertyTypeDefault Value
idString

<b-nav-item-dropdown>

Component aliases

<b-nav-item-dropdown> can also be used via the following aliases:

  • <b-nav-item-dd>
  • <b-nav-dropdown>
  • <b-nav-dd>

Properties

PropertyTypeDefault Value
idString
disabledBooleanfalse
textString
htmlString
dropupBooleanfalse
droprightBooleanfalse
dropleftBooleanfalse
rightBooleanfalse
offsetNumber or String0
no-flipBooleanfalse
popper-optsObject
no-caretBooleanfalse
extra-toggle-classesString
extra-menu-classesString
roleStringmenu

Slots

SlotDescription
button-contentCan be used to implement custom text with icons and more styling.

Events

EventArgumentsDescription
show
bvEvt - BvEvent object. Call bvEvt.preventDefault() to cancel show.
Emitted just before dropdown is shown. Cancelable.
shownEmitted when dropdown is shown.
hide
bvEvt - BvEvent object. Call bvEvt.preventDefault() to cancel hide.
Emitted just before dropdown is hidden. Cancelable.
hiddenEmitted when dropdown is hidden.
toggleEmitted when toggle button is clicked.

Importing individual Nav Components

ComponentImport Path
<b-nav>bootstrap-vue/es/components/nav/nav
<b-nav-item>bootstrap-vue/es/components/nav-item/nav-item
<b-nav-text>bootstrap-vue/es/components/nav-text/nav-text
<b-nav-form>bootstrap-vue/es/components/nav-form/nav-form
<b-nav-item-dropdown>bootstrap-vue/es/components/nav-item-dropdown/nav-item-dropdown

Example:

import BNav from 'bootstrap-vue/es/components/nav/nav'
Vue.component('b-nav', BNav)

Importing Nav as a Vue plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

import { Nav } from 'bootstrap-vue/es/components'
Vue.use(Nav)

This plugin also automatically includes the following plugins:

  • Dropdown