[[toc]]
The component BNavbar
is a wrapper that positions branding, navigation, and other elements into a concise header. It is easily extensible and thanks to the BCollapse
component, it can easily integrate responsive behaviors.
<BNavbar toggleable="lg" variant="primary" v-b-color-mode="'dark'">
<BNavbarBrand href="#">NavBar</BNavbarBrand>
<BNavbarToggle target="nav-collapse" />
<BCollapse id="nav-collapse" is-nav>
<BNavbarNav>
<BNavItem href="#">Link</BNavItem>
<BNavItem href="#" disabled>Disabled</BNavItem>
</BNavbarNav>
<!-- Right aligned nav items -->
<BNavbarNav class="ms-auto mb-2 mb-lg-0">
<BNavItemDropdown text="Lang" right>
<BDropdownItem href="#">EN</BDropdownItem>
<BDropdownItem href="#">ES</BDropdownItem>
<BDropdownItem href="#">RU</BDropdownItem>
<BDropdownItem href="#">FA</BDropdownItem>
</BNavItemDropdown>
<BNavItemDropdown right>
<!-- Using 'button-content' slot -->
<template #button-content>
<em>User</em>
</template>
<BDropdownItem href="#">Profile</BDropdownItem>
<BDropdownItem href="#">Sign Out</BDropdownItem>
</BNavItemDropdown>
</BNavbarNav>
<BNavForm class="d-flex">
<BFormInput class="me-2" placeholder="Search" />
<BButton type="submit" variant="outline-success">Search</BButton>
</BNavForm>
</BCollapse>
</BNavbar>
BNavbar
supports the standard Bootstrap v5 available background color variants. Set the variant
prop to one of the
following values to change the background color: primary, secondary, success, info, warning, danger, dark, light, or any of the *-subtle variants.
If the variant
prop is set, it may be necessary to control the text color so that it contrasts with the variant
irrespective of the theme. This can be done by use the v-b-color-mode
directive or useColorMode
composable
An example using v-b-colorMode
. For more information see the BColorMode directive.
<template #html>
<BNavbar variant="primary" v-b-color-mode="'dark'">
<BNavbarBrand tag="h1" class="mb-0">BootstrapVue</BNavbarBrand>
</BNavbar>
BNavbar
will conform to the current color theme if the variant
prop is not set.
Control the placement of the navbar by setting one of two props:
Notes:
- Fixed positioning uses CSS
position: fixed
. You may need to adjust your document top/bottom padding or margin. - CSS
position: sticky
(used forsticky
) is not fully supported in every browser. For browsers that do not supportposition: sticky
, it will fallback natively toposition: relative
.
Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:
BNavbarBrand
for your company, product, or project name.BNavbarToggle
for use with the<BCollapse is-nav>
component.<BCollapse is-nav>
for grouping and hiding navbar contents by a parent breakpoint.BNavbarNav
for a full-height and lightweight navigation (including support for dropdowns). The following sub-components insideBNavbarNav
are supported: --BNavItem
for link (and router-link) action items --BNavItemDropdown
for nav dropdown menus --BNavText
for adding vertically centered strings of text. --BNavForm
for any form controls and actions.
The BNavbarBrand
generates a link if href is provided, or a RouterLink
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:
<!-- As a link -->
<BNavbar variant="faded">
<BNavbarBrand href="#">BootstrapVueNext</BNavbarBrand>
</BNavbar>
<!-- As a heading -->
<BNavbar variant="faded">
<BNavbarBrand tag="h1" class="mb-0">BootstrapVue</BNavbarBrand>
</BNavbar>
Adding images to the BNavbarBrand
will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate:
<!-- Just an image -->
<BNavbar variant="faded">
<BNavbarBrand href="#">
<img src="https://placekitten.com/g/30/30" alt="Kitten">
</BNavbarBrand>
</BNavbar>
<!-- Image and text -->
<BNavbar variant="faded">
<BNavbarBrand href="#">
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten">
BootstrapVue
</BNavbarBrand>
</BNavbar>
Navbar navigation links build on the BNavbarNav
parent component and requires the use of <BCollapse is-nav>
and <-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.
BNavbarNav
supports the following child components:
BNavItem
for link (and router-link) action itemsBNavText
for adding vertically centered strings of text.BNavItemDropdown
for navbar dropdown menusBNavForm
for adding simple forms to the navbar.
BNavItem
is the primary link (and RouterLink
) component. Providing a to prop value will generate a RouterLink
while providing an href prop value will generate a standard link.
Set the BNavItem
active prop will highlight the item as being the active page, Disable a BNavItem
by setting the prop disabled to true.
Handle click events by specifying a handler for the @click event on BNavItem
.
Navbars may contain bits of text with the help of BNavText
. This component adjusts vertical alignment and horizontal spacing for strings of text.
<BNavbar toggleable="sm" variant="primary" v-b-color-mode="'dark'">
<BNavbarToggle target="nav-text-collapse" />
<BNavbarBrand>BootstrapVue</BNavbarBrand>
<BCollapse id="nav-text-collapse" is-nav>
<BNavbarNav>
<BNavText>Navbar text</BNavText>
</BNavbarNav>
</BCollapse>
</BNavbar>
For BNavItemDropdown
usage, see the BDropdown
docs. Note split dropdowns are not supported in BNavbar
and BNavbarNav
.
<BNavbar variant="dark" v-b-color-mode="'dark'">
<BNavbarNav>
<BNavItem href="#">Home</BNavItem>
<!-- Navbar dropdowns -->
<BNavItemDropdown text="Lang" right>
<BDropdownItem href="#">EN</BDropdownItem>
<BDropdownItem href="#">ES</BDropdownItem>
<BDropdownItem href="#">RU</BDropdownItem>
<BDropdownItem href="#">FA</BDropdownItem>
</BNavItemDropdown>
<BNavItemDropdown text="User" right>
<BDropdownItem href="#">Account</BDropdownItem>
<BDropdownItem href="#">Settings</BDropdownItem>
</BNavItemDropdown>
</BNavbarNav>
</BNavbar>
Use BNavForm
to place inline form controls into your navbar
<BNavbar variant="primary" v-b-color-mode="'dark'">
<BNavForm>
<BFormInput class="me-sm-2" placeholder="Search" />
<BButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</BButton>
</BNavForm>
</BNavbar>
Input Groups work as well:
<BNavbar variant="primary" v-b-color-mode="'dark'">
<BNavForm>
<BInputGroup prepend="@">
<BFormInput placeholder="Username" />
</BInputGroup>
</BNavForm>
</BNavbar>
Navbars are not responsive by default, but you can easily modify them to change that. Responsive behavior depends on our BCollapse
component.
Wrap BNavbarNav
components in a <BCollapse 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 BCollapse
.
Use the BNavbarToggle
component to control the collapse component, and set the target prop of BNavbarToggle
to the id of BCollapse
.
Set the toggleable prop on BNavbar
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).
BNavbarToggle
components are left-aligned by default, but should they follow a sibling element like BNavbarBrand
, 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 BCollapse
for details on the collapse component.
Besides being used to control a collapse, the BNavbarToggle
can also be used to toggle visibility of the BSidebar
component. Just specify the ID of the BSidebar
via the target prop.
Internally, BNavbarToggle
uses the v-b-toggle directive.
BNavbarToggle
renders the default Bootstrap v5 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.
Note that the expanded scope property only works when supplying the target prop as a string, and not an array.
NavBar Link 1 Link 2 Disabled<BNavbar toggleable variant="dark" v-b-color-mode="'dark'">
<BNavbarBrand href="#">NavBar</BNavbarBrand>
<BNavbarToggle target="navbar-toggle-collapse">
<template #default="{ expanded }">
<ChevronBarUpIcon v-if="expanded" />
<ChevronBarDownIcon v-else icon="chevron-bar-down" />
</template>
</BNavbarToggle>
<BCollapse id="navbar-toggle-collapse" is-nav>
<BNavbarNav class="ms-auto">
<BNavItem href="#">Link 1</BNavItem>
<BNavItem href="#">Link 2</BNavItem>
<BNavItem href="#" disabled>Disabled</BNavItem>
</BNavbarNav>
</BCollapse>
</BNavbar>
Navbars are hidden by default when printing. Force them to be printed by setting the print prop.
BCollapse
componentBSidebar
component- v-b-toggle directive
BNav
documentation for additional components and sub-component aliases Refer to the Router support reference page for router-link specific props.