Navbar

The component <b-navbar> is a wrapper that positions branding, navigation, and other elements into a concise header. It's easily extensible and thanks to the <b-collapse> component, it can easily integrate responsive behaviors.

Example:

<div>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#">Link</b-nav-item>
        <b-nav-item href="#" disabled>Disabled</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
          <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
        </b-nav-form>

        <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template v-slot:button-content>
            <em>User</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

<!-- b-navbar.vue -->

Color schemes

<b-navbar> supports the standard Bootstrap v4 available background color variants. Set the variant prop to one of the following values to change the background color: primary, success, info, warning, danger, dark, or light.

Control the text color by setting type prop to light for use with light background color variants, or dark for dark background color variants.

Placement

Control the placement of the navbar by setting one of two props:

prop	type	default	description
`fixed`	String	`null`	Set to `top` for fixed to the top of the viewport, or `bottom` for fixed to the `bottom` of the viewport.
`sticky`	Boolean	`false`	Set to `true` to make the navbar stick to the top of the viewport (or parent container that has `position: relative` set) when scrolled.

Notes:

Fixed positioning uses CSS position: fixed. You may need to adjust your document top/bottom padding or margin.
CSS position: sticky (used for sticky) is not fully supported in every browser. For browsers that do not support position: sticky, it will fallback natively to position: relative.

Supported content

Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:

<b-navbar-brand> for your company, product, or project name.
<b-navbar-toggle> for use with the <b-collapse is-nav> component.
<b-collapse is-nav> for grouping and hiding navbar contents by a parent breakpoint.
<b-navbar-nav> for a full-height and lightweight navigation (including support for dropdowns). The following sub-components inside <b-navbar-nav> are supported:
- <b-nav-item> for link (and router-link) action items
- <b-nav-item-dropdown> for nav dropdown menus
- <b-nav-text> for adding vertically centered strings of text.
- <b-nav-form> for any form controls and actions.

The <b-navbar-brand> generates a link if href is provided, or a <router-link> if to is provided. If neither is given it renders as a <div> tag. You can override the tag type by setting the tag prop to the element you would like rendered:

<div>
  <!-- As a link -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand href="#">BootstrapVue</b-navbar-brand>
  </b-navbar>
</div>

<!-- b-navbar-brand-link.vue -->

<div>
  <!-- As a heading -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand tag="h1" class="mb-0">BootstrapVue</b-navbar-brand>
  </b-navbar>
</div>

<!-- b-navbar-brand-heading.vue -->

Adding images to the <b-navbar-brand> will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate:

<div>
  <!-- Just an image -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand href="#">
      <img src="https://placekitten.com/g/30/30" alt="Kitten">
    </b-navbar-brand>
  </b-navbar>
</div>

<!-- b-navbar-brand-image.vue -->

<div>
  <!-- Image and text -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand href="#">
      <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten">
      BootstrapVue
    </b-navbar-brand>
  </b-navbar>
</div>

<!-- b-navbar-brand-image-and-text.vue -->

Navbar navigation links build on the <b-navbar-nav> parent component and requires the use of <b-collapse is-nav> and <b-nav-toggle> toggler for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.

<b-navbar-nav> supports the following child components:

<b-nav-item> for link (and router-link) action items
<b-nav-text> for adding vertically centered strings of text.
<b-nav-item-dropdown> for navbar dropdown menus
<b-nav-form> for adding simple forms to the navbar.

`<b-nav-item>`

<b-nav-item> is the primary link (and <router-link>) component. Providing a to prop value will generate a <router-link> while providing an href prop value will generate a standard link.

Set the <b-nav-item> active prop will highlight the item as being the active page, Disable a <b-nav-item> by setting the prop disabled to true.

Handle click events by specifying a handler for the @click event on <b-nav-item>.

`<b-nav-text>`

Navbars may contain bits of text with the help of <b-nav-text>. This component adjusts vertical alignment and horizontal spacing for strings of text.

<div>
  <b-navbar toggleable="sm" type="light" variant="light">
    <b-navbar-toggle target="nav-text-collapse"></b-navbar-toggle>

    <b-navbar-brand>BootstrapVue</b-navbar-brand>

    <b-collapse id="nav-text-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-text>Navbar text</b-nav-text>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

<!-- b-navbar-text.vue -->

For <b-nav-item-dropdown> usage, see the <b-dropdown> docs. Note split dropdowns are not supported in <b-navbar> and <b-navbar-nav>.

<div>
  <b-navbar type="dark" variant="dark">
    <b-navbar-nav>
      <b-nav-item href="#">Home</b-nav-item>

      <!-- Navbar dropdowns -->
      <b-nav-item-dropdown text="Lang" right>
        <b-dropdown-item href="#">EN</b-dropdown-item>
        <b-dropdown-item href="#">ES</b-dropdown-item>
        <b-dropdown-item href="#">RU</b-dropdown-item>
        <b-dropdown-item href="#">FA</b-dropdown-item>
      </b-nav-item-dropdown>

      <b-nav-item-dropdown text="User" right>
        <b-dropdown-item href="#">Account</b-dropdown-item>
        <b-dropdown-item href="#">Settings</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-navbar-nav>
  </b-navbar>
</div>

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

`<b-nav-form>`

Use <b-nav-form> to place inline form controls into your navbar

<div>
  <b-navbar type="light" variant="light">
    <b-nav-form>
      <b-form-input class="mr-sm-2" placeholder="Search"></b-form-input>
      <b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Search</b-button>
    </b-nav-form>
  </b-navbar>
</div>

<!-- b-navbar-form.vue -->

Input groups work as well:

<div>
  <b-navbar type="light" variant="light">
    <b-nav-form>
      <b-input-group prepend="@">
        <b-form-input placeholder="Username"></b-form-input>
      </b-input-group>
    </b-nav-form>
  </b-navbar>
</div>

<!-- b-navbar-form-inputs.vue -->

Navbars are not responsive by default, but you can easily modify them to change that. Responsive behavior depends on our <b-collapse> component.

Wrap <b-navbar-nav> components in a <b-collapse is-nav> (remember to set the is-nav prop!) to specify content that will collapse based on a particular breakpoint. Assign a document unique id value on the <b-collapse>.

Use the <b-navbar-toggle> component to control the collapse component, and set the target prop of <b-navbar-toggle> to the id of <b-collapse>.

Set the toggleable prop on <b-navbar> to the desired breakpoint you would like content to automatically expand at. Possible toggleable values are sm, md, lg and xl. Setting toggleable to true (or an empty string) will set the navbar to be always collapsed, while setting it to false (the default) will disable collapsing (always expanded).

<b-navbar-toggle> components are left-aligned by default, but should they follow a sibling element like <b-navbar-brand>, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler.

See the first example on this page for reference, and also refer to <b-collapse> for details on the collapse component.

<b-navbar-toggle> renders the default Bootstrap v4 hamburger (which is a background SVG image). You can supply your own content (such as an icon) via the optionally scoped default slot. The default slot scope contains the property expanded, which will be true when the collapse is expanded, or false when the collapse is collapsed. You can use this to swap the toggle content based on the collapse state:

<template>
  <b-navbar toggleable type="dark" variant="dark">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="navbar-toggle-collapse">
      <template v-slot:default="{ expanded }">
        <b-icon v-if="expanded" icon="chevron-bar-up"></b-icon>
        <b-icon v-else icon="chevron-bar-down"></b-icon>
      </template>
    </b-navbar-toggle>

    <b-collapse id="navbar-toggle-collapse" is-nav>
      <b-navbar-nav class="ml-auto">
        <b-nav-item href="#">Link 1</b-nav-item>
        <b-nav-item href="#">Link 2</b-nav-item>
        <b-nav-item href="#" disabled>Disabled</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>

<!-- b-navbar-toggle-slot.vue -->

Printing

Navbars are hidden by default when printing. Force them to be printed by setting the print prop.

Component reference

View source

<b-navbar> Properties

Property	Type	Default	Description
`tag`	`String`	`'nav'`	Specify the HTML tag to render instead of the default tag
`type`	`String`	`'light'`	Control the text color by setting to 'light' for use with light background color variants, or 'dark' for dark background color variants
`variant` Settings	`String`	`null`	Applies one of the Bootstrap theme color variants to the component
`toggleable`	`Boolean` or `String`	`false`	Set to 'true' for an always collapsed navbar, or to a specific breakpoint at which point the navbar will be expanded: 'sm', 'md', 'lg' or 'xl'
`fixed`	`String`		Set to 'top' for fixed to the top of the viewport, or 'bottom' for fixed to the bottom of the viewport
`sticky`	`Boolean`	`false`	Set to true to make the navbar stick to the top of the viewport (or parent container that has 'position: relative' set) when scrolled
`print`	`Boolean`	`false`	Navbars are hidden by default when printing. When this prop is set it will be printed

Functional component

View source

<b-navbar-nav> Properties

Property	Type	Default	Description
`tag`	`String`	`'ul'`	Specify the HTML tag to render instead of the default tag
`fill`	`Boolean`	`false`	Proportionately fills all horizontal space with nav items. All horizontal space is occupied, but not every nav item has the same width
`justified`	`Boolean`	`false`	Fills all horizontal space with nav items, but unlike 'fill', every nav item will be the same width
`align`	`String`		Align the nav items in the nav: 'start' (or 'left'), 'center', 'end' (or 'right')
`small`	`Boolean`	`false`	Makes the nav smaller

Functional component

View source

<b-navbar-brand> Properties

Property (Click to sort Ascending)	Type	Default	Description
`href`	`String`		Denotes the target URL of the link for standard a links
`rel`	`String`	`null`	Sets the 'rel' attribute on the rendered link
`target`	`String`	`'_self'`	Sets the 'target' attribute on the rendered link
`active`	`Boolean`	`false`	When set to 'true', places the component in the active state with active styling
`disabled`	`Boolean`	`false`	When set to 'true', disables the component's functionality and places it in a disabled state
`to`	`String` or `Object`		router-link prop: Denotes the target route of the link. When clicked, the value of the to prop will be passed to router.push() internally, so the value can be either a string or a Location descriptor object
`append`	`Boolean`	`false`	router-link prop: Setting append prop always appends the relative path to the current path
`replace`	`Boolean`	`false`	router-link prop: Setting the replace prop will call 'router.replace()' instead of 'router.push()' when clicked, so the navigation will not leave a history record
`event`	`String` or `Array`	`'click'`	router-link prop: Specify the event that triggers the link. In most cases you should leave this as the default
`active-class`	`String`		router-link prop: Configure the active CSS class applied when the link is active. Typically you will want to set this to class name 'active'
`exact`	`Boolean`	`false`	router-link prop: The default active class matching behavior is inclusive match. Setting this prop forces the mode to exactly match the route
`exact-active-class`	`String`		router-link prop: Configure the active CSS class applied when the link is active with exact match. Typically you will want to set this to class name 'active'
`router-tag`	`String`	`'a'`	router-link prop: Specify which tag to render, and it will still listen to click events for navigation. 'router-tag' translates to the tag prop on the final rendered router-link. Typically you should use the default value
`no-prefetch`	`Boolean`	`false`	nuxt-link prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting 'no-prefetch' will disabled this feature for the specific link
`tag`	`String`	`'div'`	Specify the HTML tag to render instead of the default tag

<b-navbar-brand> supports generating <router-link> or <nuxt-link> component (if using Nuxt.js). For more details on the router link (or nuxt link) specific props, see the Router support reference section.

View source

<b-navbar-toggle> Component aliases
<b-navbar-toggle> Properties
<b-navbar-toggle> Slots
<b-navbar-toggle> Events

<b-navbar-toggle> can also be used via the following aliases:

<b-nav-toggle>

Note: component aliases are only available when importing all of BootstrapVue or using the component group plugin.

Property	Type	Default	Description
`label` Settings	`String`	`'Toggle navigation'`	String to place in the toggle's 'aria-label' attribute
`target` Required	`String`		ID of the collapse the toggle controls

Slot Name	Scoped	Description
`default`		Alternate content to replace the default Bootstrap hamburger

Event	Arguments	Description
`click`	Native click event object	Emitted when the toggle is clicked.

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export	Import Path
`<b-navbar>`	`BNavbar`	`bootstrap-vue`
`<b-navbar-nav>`	`BNavbarNav`	`bootstrap-vue`
`<b-navbar-brand>`	`BNavbarBrand`	`bootstrap-vue`
`<b-navbar-toggle>`	`BNavbarToggle`	`bootstrap-vue`

Example:

import { BNavbar } from 'bootstrap-vue'
Vue.component('b-navbar', BNavbar)

Importing as a Vue.js plugin

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

Named Export	Import Path
`NavbarPlugin`	`bootstrap-vue`

This plugin also automatically includes the following plugins:

NavPlugin
DropdownPlugin
CollapsePlugin

Example:

import { NavbarPlugin } from 'bootstrap-vue'
Vue.use(NavbarPlugin)

Color schemes

Placement

Supported content

`<b-navbar-brand>`

`<b-navbar-nav>`

`<b-nav-item>`

`<b-nav-text>`

`<b-nav-form>`

`<b-navbar-toggle>` and `<b-collapse is-nav>`

Custom navbar toggle

Printing

See also

Component reference

`<b-navbar>`

Properties

`<b-navbar-nav>`

Properties

`<b-navbar-brand>`

Properties

`<b-navbar-toggle>`

Component aliases

Properties

Slots

Events

Importing individual components

Importing as a Vue.js plugin

Color schemes

Placement

Supported content

<b-navbar-brand>

<b-navbar-nav>

<b-nav-item>

<b-nav-text>

<b-nav-item-dropdown>

<b-nav-form>

<b-navbar-toggle> and <b-collapse is-nav>

Custom navbar toggle

Printing

See also

Component reference

Properties

Properties

Properties

Component aliases

Properties

Slots

Events

Importing individual components

Importing as a Vue.js plugin

`<b-navbar-brand>`

`<b-navbar-nav>`

`<b-nav-item>`

`<b-nav-text>`

`<b-nav-item-dropdown>`

`<b-nav-form>`

`<b-navbar-toggle>` and `<b-collapse is-nav>`