A BootstrapVue Navbar is a navigation header that is placed at the top of the page. It can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class="navbar navbar-default">
. Check this documentation and examples for BootstrapVue’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Example
<div>
<b-navbar toggleable= "lg" type= "dark" variant= "default" class= "navbar-horizontal" >
<b-navbar-brand href= "#" > DEFAULT COLOR</b-navbar-brand>
<b-navbar-toggle target= "nav-collapse" ></b-navbar-toggle>
<b-collapse id= "nav-collapse" is-nav >
<!-- Right aligned nav items -->
<b-navbar-nav class= "ml-auto" >
<b-nav-form>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "ni ni-favourite-28" ></i>
<span class= "nav-link-inner--text d-lg-none" > Discover</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "ni ni-notification-70" ></i>
<span class= "nav-link-inner--text d-lg-none" > Profile</span>
</a>
</li>
<b-nav-item-dropdown right >
<template v-slot:button-content >
<i class= "ni ni-settings-gear-65" ></i>
<span class= "nav-link-inner--text d-lg-none" > Settings</span>
</template>
<b-dropdown-item href= "#" > Action</b-dropdown-item>
<b-dropdown-item href= "#" > Another action</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item href= "#" > Something else here</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav-form>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
Variations
<div>
<b-navbar toggleable= "lg" type= "dark" variant= "primary" class= "navbar-horizontal" >
<b-navbar-brand href= "#" > PRIMARY COLOR</b-navbar-brand>
<b-navbar-toggle target= "nav-collapse" ></b-navbar-toggle>
<b-collapse id= "nav-collapse" is-nav >
<!-- Right aligned nav items -->
<b-navbar-nav class= "ml-auto" >
<b-nav-form>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<span class= "nav-link nav-link-inner--text" > Discover</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<span class= "nav-link nav-link-inner--text" > Profile</span>
</a>
</li>
<b-nav-item-dropdown right >
<template v-slot:button-content >
<span class= "nav-link-inner--text" > Settings</span>
</template>
<b-dropdown-item href= "#" > Action</b-dropdown-item>
<b-dropdown-item href= "#" > Another action</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item href= "#" > Something else here</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav-form>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<br><br>
<b-navbar toggleable= "lg" type= "dark" variant= "success" class= "navbar-horizontal" >
<b-navbar-brand href= "#" > SUCCESS COLOR</b-navbar-brand>
<b-navbar-toggle target= "nav-collapse" ></b-navbar-toggle>
<b-collapse id= "nav-collapse" is-nav >
<!-- Right aligned nav items -->
<b-navbar-nav class= "ml-auto" >
<b-nav-form>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "nav-link ni ni-favourite-28" ></i>
<span class= "nav-link-inner--text d-lg-none" > Discover</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "nav-link ni ni-planet" ></i>
<span class= "nav-link-inner--text d-lg-none" > Profile</span>
</a>
</li>
<b-nav-item-dropdown right >
<template v-slot:button-content >
<i class= "ni ni-settings-gear-65" ></i>
<span class= "nav-link-inner--text d-lg-none" > Settings</span>
</template>
<b-dropdown-item href= "#" > Action</b-dropdown-item>
<b-dropdown-item href= "#" > Another action</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item href= "#" > Something else here</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav-form>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<br><br>
<b-navbar toggleable= "lg" type= "dark" variant= "danger" class= "navbar-horizontal" >
<b-navbar-brand href= "#" > DANGER COLOR</b-navbar-brand>
<b-navbar-toggle target= "nav-collapse" ></b-navbar-toggle>
<b-collapse id= "nav-collapse" is-nav >
<!-- Right aligned nav items -->
<b-navbar-nav class= "ml-auto" >
<b-nav-form>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-facebook-square" ></i>
<span class= "nav-link-inner--text d-lg-none" > Facebook</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-twitter" ></i>
<span class= "nav-link-inner--text d-lg-none" > Twitter</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-google-plus" ></i>
<span class= "nav-link-inner--text d-lg-none" > Google +</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-instagram" ></i>
<span class= "nav-link-inner--text d-lg-none" > Instagram</span>
</a>
</li>
</b-nav-form>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<br><br>
<b-navbar toggleable= "lg" type= "dark" variant= "warning" class= "navbar-horizontal" >
<b-navbar-brand href= "#" > WARNING COLOR</b-navbar-brand>
<b-navbar-toggle target= "nav-collapse" ></b-navbar-toggle>
<b-collapse id= "nav-collapse" is-nav >
<!-- Right aligned nav items -->
<b-navbar-nav class= "ml-auto" >
<b-nav-form>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-facebook-square" ></i>
<span class= "nav-link-inner--text d-lg-none" > Facebook</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-twitter" ></i>
<span class= "nav-link-inner--text d-lg-none" > Twitter</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-pinterest" ></i>
<span class= "nav-link-inner--text d-lg-none" > Pinterest</span>
</a>
</li>
</b-nav-form>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<br><br>
<b-navbar toggleable= "lg" type= "dark" variant= "info" class= "navbar-horizontal" >
<b-navbar-brand href= "#" > INFO COLOR</b-navbar-brand>
<b-navbar-toggle target= "nav-collapse" ></b-navbar-toggle>
<b-collapse id= "nav-collapse" is-nav >
<!-- Right aligned nav items -->
<b-navbar-nav class= "ml-auto" >
<b-nav-form>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-facebook-square" ></i>
<span class= "nav-link-inner--text" > Facebook</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-twitter" ></i>
<span class= "nav-link-inner--text" > Twitter</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fab fa-instagram" ></i>
<span class= "nav-link-inner--text" > Instagram</span>
</a>
</li>
</b-nav-form>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
Base Nav props
PROP NAME
TYPE
DEFAULT
DESCRIPTION
show
Boolean
N/A
Whether navbar menu is shown (valid for viewports < specified by expand
prop)
transparent
Boolean
N/A
Whether navbar is transparent
expand
String
lg
Breakpoint where nav should expand
menuClasses
String / Object / Array
N/A
Navbar menu (items) classes. Can be used to align menu items to the right/left
containerClasses
String / Object / Array
container
Container classes. Can be used to control container classes (contains both navbar brand and menu items)
type
String
N/A
Navbar color type
If you want to see more examples and properties please check the official BootstrapVue Documentation .
Props
If you want to see more examples and properties please check the official Materilal-UI Documentation .