Nav ​

Bootstrap's vue nav component is a simple wrapper for building navigation components.

HTML
template
<BNav>
  <BNavItem>Home</BNavItem>
  <BNavItem>About</BNavItem>
  <BNavItem>New</BNavItem>
  <BNavItem disabled>Home</BNavItem>
</BNav>

Dropdowns can be added like so

HTML
vue
<template>
  <BNav pills>
    <BNavItem active>Active</BNavItem>
    <BNavItem>Link</BNavItem>
    <BNavItemDropdown
      v-model="dropdownShow"
      id="my-nav-dropdown"
      text="Dropdown"
      toggle-class="nav-link-custom"
      end
    >
      <BDropdownItem>One</BDropdownItem>
      <BDropdownItem>Two</BDropdownItem>
      <BDropdownDivider />
      <BDropdownItem>Three</BDropdownItem>
    </BNavItemDropdown>
  </BNav>
</template>

<script setup lang="ts">
const dropdownShow = ref(false)
</script>

BNavItemDropdown has many props in common with <BDropdown so you can easily integrate custom options.

Styles ​

You can make nav item styles in various ways.

Tab Style ​

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

Pills Style ​

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

Vertical Orientation ​

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

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

Nav Text ​

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

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

Component Reference

<BNav>
View Source
Properties
PropTypeDefaultDescription
alignAlignmentJustifyContentundefined
card-headerbooleanfalse
fillbooleanfalse
justifiedbooleanfalse
pillsbooleanfalse
smallbooleanfalse
tabsbooleanfalse
tagstring'ul'
underlinebooleanfalse
verticalbooleanfalse
Slots
NameScopeDescription
default
<BNavForm>
View Source
Properties
PropTypeDefaultDescription
floatingbooleanundefined
idstringundefined
novalidatebooleanundefined
rolestringundefined
validatedbooleanundefined
Events
EventArgsDescription
submit
submit: Event
Slots
NameScopeDescription
default
<BNavItem>
View Source
Properties
PropTypeDefaultDescription
activebooleanundefined
active-classstringundefined
disabledbooleanundefined
exact-active-classstringundefined
hrefstringundefined
iconbooleanundefined
link-attrsReadonly<AttrsValue>undefined
link-classClassValueundefined
no-prefetchundefined
no-relundefined
opacity10 | 25 | 50 | 75 | 100 | '10' | '25' | '50' | '75' | '100'undefined
opacity-hover10 | 25 | 50 | 75 | 100 | '10' | '25' | '50' | '75' | '100'undefined
prefetchundefined
prefetched-classundefined
relstringundefined
replacebooleanundefined
router-component-namestringundefined
stretchedbooleanfalse
targetLinkTargetundefined
toRouteLocationRawundefined
underline-offset1 | 2 | 3 | '1' | '2' | '3'undefined
underline-offset-hover1 | 2 | 3 | '1' | '2' | '3'undefined
underline-opacity0 | 10 | 25 | 50 | 75 | 100 | '0' | '10' | '25' | '50' | '75' | '100'undefined
underline-opacity-hover0 | 10 | 25 | 50 | 75 | 100 | '0' | '10' | '25' | '50' | '75' | '100'undefined
underline-variantColorVariant | nullundefined
variantColorVariant | nullundefined
Events
EventArgsDescription
click
click: MouseEvent - On click event
Slots
NameScopeDescription
default
<BNavItemDropdown>
View Source
Properties
PropTypeDefaultDescription
aria-labelstringundefined Sets the value of `aria-label` attribute on the rendered element
auto-closeboolean | 'inside' | 'outside'true
boundaryBoundary | RootBoundary'clippingAncestors'
boundary-paddingPaddingundefined
disabledbooleanfalse When set to `true`, disables the component's functionality and places it in a disabled state
floating-middlewareMiddleware[]undefined
idstringundefined Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed
is-navbooleantrue
lazybooleanfalse
menu-classClassValueundefined
model-valuebooleanfalse
no-caretbooleanfalse
no-flipbooleanfalse
no-shiftbooleanfalse
no-sizebooleanfalse
offsetnumber | string | {mainAxis?: number | string; crossAxis?: number; alignmentAxis?: number | null}0
placementPlacement'bottom-start' Placement of a floating element
rolestringundefined Sets the ARIA attribute `role` to a specific value
sizeSize'md' Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'
skip-wrapperbooleanundefined
splitbooleanfalse
split-button-typeButtonType'button'
split-classClassValueundefined
split-disabledbooleanundefined
split-hrefstringundefined
split-toRouteLocationRawundefined
split-variantButtonVariant | nullundefined
strategyStrategy'absolute'
teleport-disabledbooleanfalse
teleport-tostring | RendererElement | null | undefinedundefined
textstringundefined
toggle-classClassValueundefined
toggle-textstring'Toggle dropdown'
variantButtonVariant | null'link'
wrapper-classClassValueundefined
Events
EventArgsDescription
click
click: MouseEvent
hidden
hide
value: BvTriggerableEvent
hide-preventedEmitted when the dropdown tried to close, but was prevented from doing so.
show
value: BvTriggerableEvent
show-preventedEmitted when the dropdown tried to open, but was prevented from doing so.
shown
toggle
update:model-value
value: boolean - The new value of the dropdown's state
Emitted when the dropdown state changes
Slots
NameScopeDescription
button-content
default
toggle-text
hide: () => void
show: () => void
<BNavText>
View Source
Properties
PropTypeDefaultDescription
textstringundefined
Slots
NameScopeDescription
default