Nav ​

<BNav>
  <BNavItem active>Active</BNavItem>
  <BNavItem>Link</BNavItem>
  <BNavItem>Another Link</BNavItem>
  <BNavItem disabled>Disabled</BNavItem>
</BNav>

Overview ​

The base <BNav> 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.

<BNav> supports the following child components:

• <BNavItem> for actionable links (or router-links)
• <BNavItemDropdown> for dropdowns
• <BNavText> for plain text content
• <BNavForm> for inline forms

Link appearance ​

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 tabs prop.

<BNav tabs>
  <BNavItem active>Active</BNavItem>
  <BNavItem>Link</BNavItem>
  <BNavItem>Another Link</BNavItem>
  <BNavItem disabled>Disabled</BNavItem>
</BNav>

Pill style ​

Use the pill style by setting the pills prop.

<BNav pills>
  <BNavItem active>Active</BNavItem>
  <BNavItem>Link</BNavItem>
  <BNavItem>Another Link</BNavItem>
  <BNavItem disabled>Disabled</BNavItem>
</BNav>

Small ​

Make the nav smaller by setting the small prop.

<BNav small>
  <BNavItem active>Active</BNavItem>
  <BNavItem>Link</BNavItem>
  <BNavItem>Another Link</BNavItem>
  <BNavItem disabled>Disabled</BNavItem>
</BNav>

Fill and justify ​

Force your <BNav> content to extend the full available width.

Fill ​

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

<BNav tabs fill>
  <BNavItem active>Active</BNavItem>
  <BNavItem>Link</BNavItem>
  <BNavItem>Link with a long name </BNavItem>
  <BNavItem disabled>Disabled</BNavItem>
</BNav>

Justified ​

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

<BNav tabs justified>
  <BNavItem active>Active</BNavItem>
  <BNavItem>Link</BNavItem>
  <BNavItem>Link with a long name </BNavItem>
  <BNavItem disabled>Disabled</BNavItem>
</BNav>

Alignment ​

To align your <BNavItem> components, use the align prop. Available values are those from AlignmentJustifyContent: start, center, end, between, around, and evenly.

<BNav tabs align="center">
  <BNavItem active>Active</BNavItem>
  <BNavItem>Link</BNavItem>
  <BNavItem>Link with a long name </BNavItem>
  <BNavItem disabled>Disabled</BNavItem>
</BNav>

Vertical variation ​

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

<BNav vertical class="w-25">
  <BNavItem active>Active</BNavItem>
  <BNavItem>Link</BNavItem>
  <BNavItem>Another Link</BNavItem>
  <BNavItem disabled>Disabled</BNavItem>
</BNav>

Dropdown support ​

Use <BNavItemDropdown> to place dropdown items within your nav.

<BNav pills>
  <BNavItem active>Active</BNavItem>
  <BNavItem>Link</BNavItem>
  <BNavItemDropdown id="my-nav-dropdown" text="Dropdown" toggle-class="nav-link-custom" right>
    <BDropdownItem>One</BDropdownItem>
    <BDropdownItem>Two</BDropdownItem>
    <BDropdownDivider />
    <BDropdownItem>Three</BDropdownItem>
  </BNavItemDropdown>
</BNav>

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 toggle-class prop to add them (like above) which will render HTML similar to:

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

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

Optionally scoped default slot ​

The dropdown default slot is optionally scoped with the following scope available:

Lazy dropdown ​

By default, <BNavItemDropdown> renders the menu contents in the DOM even when the menu is not shown. When there are a large number of dropdowns rendered on the same page, performance could be impacted due to larger overall memory utilization. You can instruct <BNavItemDropdown> to render the menu contents only when it is shown by setting the lazy prop to true.

Dropdown placement ​

Use the start, end, center, placement, no-flip, and offset to control the positioning of <BNavItemDropdown>.

Refer to the <BDropdown> positioning section for details on the effects and usage of these props.

Dropdown implementation note ​

Note that the toggle button is actually rendered as a link <a> tag with role="button" for styling purposes, and typically has the href set to # unless an ID is provided via the id prop.

The toggle will prevent scroll-top-top behaviour (via JavaScript) when clicking the toggle link. In some cases when using SSR, and the user clicks the toggle button before Vue has had a chance to hydrate the component, the page will scroll to top. In these cases, simply providing a unique ID via the id prop will prevent the unwanted scroll-to-top behaviour.

Dropdown Exposed Methods ​

<BNavItemDropdown> exposes the same methods as <BDropdown>, see the dropdown documentation for details.

Nav text content ​

Use the <BNavText> child component to place plain text content into the nav:

<BNav>
  <BNavItem href="#1">Link 1</BNavItem>
  <BNavItem href="#2">Link 2</BNavItem>
  <BNavText>Plain text</BNavText>
</BNav>

Nav inline forms ​

Use the <BNavForm> child component to place an inline form into the nav:

<template>
  <BNav pills class="mb-1">
    <BNavItem href="#1" active>Link 1</BNavItem>
    <BNavItem href="#2">Link 2</BNavItem>
    <BNavForm @submit.stop.prevent="submitted = true">
      <BFormInput aria-label="Input" class="mr-1" />
      <BButton class="ms-2" type="submit">Ok</BButton>
    </BNavForm>
  </BNav>
  <span v-if="submitted">Form Submitted</span>
</template>

<script setup lang="ts">
import {ref} from 'vue'

const submitted = ref(false)
</script>

Refer to the <BForm> inline documentation for additional details on placing form controls.

Tabbed local content support ​

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

Card integration ​

Use a <BNav> in a <BCard> header, by enabling the card-header prop on <BNav> and setting either the pills or tabs props:

Tabs style:

<BCard title="Card Title" no-body>
  <BCardHeader header-tag="nav">
    <BNav card-header tabs>
      <BNavItem active>Active</BNavItem>
      <BNavItem>Inactive</BNavItem>
      <BNavItem disabled>Disabled</BNavItem>
    </BNav>
  </BCardHeader>

  <BCardBody class="text-center">
    <BCardText>
      With supporting text below as a natural lead-in to additional content.
    </BCardText>

    <BButton variant="primary">Go somewhere</BButton>
  </BCardBody>
</BCard>

Pill style:

<BCard title="Card Title" no-body>
  <BCardHeader header-tag="nav">
    <BNav card-header pills>
      <BNavItem active>Active</BNavItem>
      <BNavItem>Inactive</BNavItem>
      <BNavItem disabled>Disabled</BNavItem>
    </BNav>
  </BCardHeader>

  <BCardBody class="text-center">
    <BCardText>
      With supporting text below as a natural lead-in to additional content.
    </BCardText>

    <BButton variant="primary">Go somewhere</BButton>
  </BCardBody>
</BCard>

Plain style:

The card-header prop is only needed when you are applying tabs or pills style. Note that Bootstrap v5 SCSS does not have special styling for active state plain style nav items.

<BCard title="Card Title" no-body>
  <BCardHeader header-tag="nav">
    <BNav>
      <BNavItem active>Active</BNavItem>
      <BNavItem>Inactive</BNavItem>
      <BNavItem disabled>Disabled</BNavItem>
    </BNav>
  </BCardHeader>

  <BCardBody class="text-center">
    <BCardText>
      With supporting text below as a natural lead-in to additional content.
    </BCardText>

    <BButton variant="primary">Go somewhere</BButton>
  </BCardBody>
</BCard>

The card-header prop has no styling effect if the <BNav> is in vertical mode.

Using with Vue Router ​

Have your card <BNav> control vue router nested routes via <router-view> or <nuxt-child> components, to created tabbed content that changes with route URL:

<!-- On page with route `/some/route` -->
<BCard title="Card Title" no-body>
  <BCardHeader header-tag="nav">
    <BNav card-header tabs>
      <!-- <BNavItem>'s with child routes. Note the trailing slash on the first <BNavItem> -->
      <BNavItem to="/some/route/" exact exact-active-class="active">Active</BNavItem>
      <BNavItem to="/some/route/foo" exact exact-active-class="active">Foo</BNavItem>
      <BNavItem to="/some/route/bar" exact exact-active-class="active">Bar</BNavItem>
    </BNav>
  </BCardHeader>

  <BCardBody>
    <!-- Child route gets rendered in <RouterView> or <NuxtPage> -->
    <RouterView />
    <!-- Or if using Nuxt.js
    <NuxtPage />
    -->
  </BCardBody>
</BCard>

Example router config for above:

/* eslint-disable @typescript-eslint/no-unused-vars */
const routes = [
  {
    path: '/some/route',
    // We don't provide a name on this parent route, but rather
    // set the name on the default child route instead
    // name: 'some-route',
    component: SomeRouteComponent,
    // Child route "tabs"
    children: [
      // Note we provide the above parent route name on the default child tab
      // route to ensure this tab is rendered by default when using named routes
      {path: '', component: DefaultTabComponent, name: 'some-route'},
      {path: 'foo', component: FooTabComponent},
      {path: 'bar', component: BarTabComponent},
    ],
  },
]

One can also use Vue Router named routes and/or route params instead of path based routes.

For more details see:

• Vue Router <router-view>
• Nuxt.JS <nuxt-child>