Vue Bootstrap Navbar
Vue Navbar - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
Vue Bootstrap navbar is a horizontal navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.
MDB provides you with stylish Navbars, with distinctive for Material Design details (such as shadows, living colors or charming wave effects triggered by clicking on the link). Apart from traditional, text links, Bootstraps Navbar might embed regular & social icons, dropdowns, avatars or search forms.
How it works
Here’s what you need to know before getting started with the navbar:
-
Navbars don't require adding
.navbar-expand{-sm|-md|-lg|-xl}
classes for responsive collapsing. The.navbar-expand-lg
class is added by defoult but you can easily change it by usingexpand
prop. You can also use color scheme prop or classes. -
Navbars and their contents are fluid by default. Use optional
<mdb-container>
to limit their horizontal width. -
Navbars and their contents are built with flexbox, providing easy alignment options via utility classes and props.
-
Navbars are responsive by default and you can easily modify them to change that.
-
<mdb-navbar>
component by default is using nav element, but you can easily change it to more generic element such as a<div>
, just add atag="div"
prop to every navbar
Read on for an example and list of supported sub-components.
Basic example
Here’s an example of all the sub-components included in a responsive dark-themed navbar that automatically collapses at the lg (large) breakpoint.
<template>
<mdb-navbar color="indigo" dark>
<mdb-navbar-brand href="https://mdbootstrap.com/">
Navbar
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item href="#" active>Home</mdb-nav-item>
<mdb-nav-item href="#">Features</mdb-nav-item>
<mdb-nav-item href="#">Pricing</mdb-nav-item>
<mdb-dropdown tag="li" class="nav-item">
<mdb-dropdown-toggle tag="a" navLink color="indigo" slot="toggle" waves-fixed>Dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-navbar-nav>
<form>
<mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
</form>
</mdb-navbar-toggler>
</mdb-navbar>
</template>
<script>
import { mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbDropdown, mdbDropdownMenu, mdbDropdownToggle, mdbInput, mdbDropdownItem } from 'mdbvue';
export default {
name: 'NavbarPage',
components: {
mdbNavbar,
mdbNavbarBrand,
mdbNavbarToggler,
mdbNavbarNav,
mdbNavItem,
mdbDropdown,
mdbDropdownMenu,
mdbDropdownToggle,
mdbDropdownItem,
mdbInput
}
}
</script>
Color schemes
Theming the navbar has never been easier thanks to the combination of a color
prop for Bootstrap utility classes and simple color classes. Put another way, you specify light or dark and
apply a background color.
You can choose one of over 300 colors form our material
palette.
<template>
<mdb-container>
<mdb-navbar color="danger" dark>
<mdb-navbar-brand href="https://mdbootstrap.com/">
Navbar
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item href="#" active>Home</mdb-nav-item>
<mdb-nav-item href="#">Features</mdb-nav-item>
<mdb-nav-item href="#">Pricing</mdb-nav-item>
<mdb-dropdown tag="li" class="nav-item">
<mdb-dropdown-toggle tag="a" navLink color="danger" slot="toggle" waves-fixed>Dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-navbar-nav>
<form>
<mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
</form>
</mdb-navbar-toggler>
</mdb-navbar>
<hr/>
<mdb-navbar color="secondary-color-dark" dark>
<mdb-navbar-brand href="https://mdbootstrap.com/">
Navbar
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item href="#" active>Home</mdb-nav-item>
<mdb-nav-item href="#">Features</mdb-nav-item>
<mdb-nav-item href="#">Pricing</mdb-nav-item>
<mdb-dropdown tag="li" class="nav-item">
<mdb-dropdown-toggle tag="a" navLink color="secondary-color-dark" slot="toggle" waves-fixed>Dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-navbar-nav>
<form>
<mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
</form>
</mdb-navbar-toggler>
</mdb-navbar>
<hr/>
<mdb-navbar color="success-color-dark" dark>
<mdb-navbar-brand href="https://mdbootstrap.com/">
Navbar
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item href="#" active>Home</mdb-nav-item>
<mdb-nav-item href="#">Features</mdb-nav-item>
<mdb-nav-item href="#">Pricing</mdb-nav-item>
<mdb-dropdown tag="li" class="nav-item">
<mdb-dropdown-toggle tag="a" navLink color="success-color-dark" slot="toggle" waves-fixed>Dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-navbar-nav>
<form>
<mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
</form>
</mdb-navbar-toggler>
</mdb-navbar>
</mdb-container>
</template>
<script>
import { mdbNavbar, mdbContainer, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbDropdown, mdbDropdownMenu, mdbDropdownToggle, mdbInput, mdbDropdownItem } from 'mdbvue';
export default {
name: 'NavbarPage',
components: {
mdbNavbar,
mdbNavbarBrand,
mdbNavbarToggler,
mdbNavbarNav,
mdbNavItem,
mdbDropdown,
mdbDropdownMenu,
mdbDropdownToggle,
mdbDropdownItem,
mdbInput,
mdbContainer
}
}
</script>
If you want to use light background you should apply .navbar-light
class to
the Navbar, to provide
a proper contrast for links. For dark background use dark
prop.
<template>
<mdb-navbar color="warning" light>
<mdb-navbar-brand href="https://mdbootstrap.com/">
Navbar
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item href="#" active>Home</mdb-nav-item>
<mdb-nav-item href="#">Features</mdb-nav-item>
<mdb-nav-item href="#">Pricing</mdb-nav-item>
<mdb-dropdown tag="li" class="nav-item">
<mdb-dropdown-toggle tag="a" navLink color="warning" slot="toggle" waves-fixed>Dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-navbar-nav>
<form>
<mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
</form>
</mdb-navbar-toggler>
</mdb-navbar>
</template>
<script>
import { mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbDropdown, mdbDropdownMenu, mdbDropdownToggle, mdbInput, mdbDropdownItem } from 'mdbvue';
export default {
name: 'NavbarPage',
components: {
mdbNavbar,
mdbNavbarBrand,
mdbNavbarToggler,
mdbNavbarNav,
mdbNavItem,
mdbDropdown,
mdbDropdownMenu,
mdbDropdownToggle,
mdbDropdownItem,
mdbInput
}
}
</script>
Alignment
<template>
<mdb-navbar expand="large" dark color="stylish">
<mdb-navbar-brand href="#">
Navbar
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item href="#" active>Home</mdb-nav-item>
<mdb-nav-item href="#">Link</mdb-nav-item>
<mdb-nav-item class="disabled" href="#">Disabled</mdb-nav-item>
<mdb-dropdown tag="li" class="nav-item">
<mdb-dropdown-toggle tag="a" navLink color="stylish" slot="toggle" waves-fixed>Dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-navbar-nav>
</mdb-navbar-toggler>
</mdb-navbar>
</template>
<script>
import { mdbDropdown, mdbDropdownToggle, mdbDropdownMenu, mdbDropdownItem, mdbContainer, mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem } from 'mdbvue';
export default {
name: 'HelloWorld',
components: {
mdbNavbar,
mdbNavbarBrand,
mdbNavbarToggler,
mdbNavbarNav,
mdbNavItem,
mdbContainer,
mdbDropdown,
mdbDropdownToggle,
mdbDropdownMenu,
mdbDropdownItem
}
}
</script>
By default nav-items are aligned to the left - align nav-items to the right by adding the right
property to the mdb-navbar-nav
component.
<template>
<mdb-navbar expand="large" dark color="indigo">
<mdb-navbar-brand href="#">
Navbar
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav right>
<mdb-nav-item href="#" active>Home</mdb-nav-item>
<mdb-nav-item href="#">Link</mdb-nav-item>
<mdb-nav-item class="disabled" href="#">Disabled</mdb-nav-item>
<mdb-dropdown tag="li" class="nav-item">
<mdb-dropdown-toggle tag="a" navLink color="indigo" slot="toggle" waves-fixed>Dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-navbar-nav>
</mdb-navbar-toggler>
</mdb-navbar>
</template>
<script>
import { mdbDropdown, mdbDropdownToggle, mdbDropdownMenu, mdbDropdownItem, mdbContainer, mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem } from 'mdbvue';
export default {
name: 'HelloWorld',
components: {
mdbNavbar,
mdbNavbarBrand,
mdbNavbarToggler,
mdbNavbarNav,
mdbNavItem,
mdbContainer,
mdbDropdown,
mdbDropdownToggle,
mdbDropdownMenu,
mdbDropdownItem
}
}
</script>
Supported content
Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:
-
<mdb-navbar-brand>
for your company, product, or project name. -
<mdb-navbar-nav>
for a full-height and lightweight navigation (including support for dropdowns). -
for any form controls and actions. -
<mdb-navbar-toggler>
for grouping and hiding navbar contents by a parent breakpoint. -
.navbar-text
for adding vertically centered strings of text.
Brand
The <mdb-navbar-brand>
component let you present your company, product,
or project name. It can be used with href
and tag
props.
<template>
<mdb-navbar color="indigo" dark>
<mdb-navbar-brand href="https://mdbootstrap.com/">
Link
</mdb-navbar-brand>
</mdb-navbar>
</template>
<script>
import { mdbNavbar, mdbNavbarBrand } from 'mdbvue';
export default {
name: 'NavbarPage',
components: {
mdbNavbar,
mdbNavbarBrand
}
}
</script>
Images
Adding images to the <mdb-navbar-brand>
will likely always require custom
styles or utilities to properly size. Here is example to demonstrate.
<template>
<mdb-navbar color="indigo">
<mdb-navbar-brand href="https://mdbootstrap.com/">
<img src="https://mdbootstrap.com/img/logo/mdb-transparent.webp" height="30" alt="">
</mdb-navbar-brand>
</mdb-navbar>
</template>
<script>
import { mdbNavbar, mdbNavbarBrand } from 'mdbvue';
export default {
name: 'NavbarPage',
components: {
mdbNavbar,
mdbNavbarBrand
}
}
</script>
Nav
Navbar navigation links build on our <mdb-navbar>
component require the use
of <mdb-navbar-toggler>
component 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.
Active states—with the active
boolean prop indicate the current page can be applied directly to
<mdb-nav-item>
components.
<template>
<mdb-navbar color="indigo" dark>
<mdb-navbar-brand href="#">
Navbar
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item href="#" class="active">Home</mdb-nav-item>
<mdb-nav-item href="#">Features</mdb-nav-item>
<mdb-nav-item href="#">Pricing</mdb-nav-item>
<mdb-nav-item class="disabled" href="#">Disabled</mdb-nav-item>
</mdb-navbar-nav>
</mdb-navbar-toggler>
</mdb-navbar>
</template>
<script>
import { mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem } from 'mdbvue';
export default {
name: 'NavbarPage',
components: {
mdbNavbar,
mdbNavbarBrand,
mdbNavbarToggler,
mdbNavbarNav,
mdbNavItem
}
}
</script>
You may also utilize dropdowns in your navbar. To do so, simply include the <mdb-dropdown>
component, as shown below.
<template>
<mdb-navbar color="indigo" dark>
<mdb-navbar-brand href="#">
Navbar
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item href="#" active> Home</mdb-nav-item>
<mdb-nav-item href="#">Features</mdb-nav-item>
<mdb-nav-item href="#">Pricing</mdb-nav-item>
<mdb-dropdown tag="li" class="nav-item">
<mdb-dropdown-toggle tag="a" navLink color="indigo" slot="toggle" waves-fixed>Dropdown link</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-navbar-nav>
</mdb-navbar-toggler>
</mdb-navbar>
</template>
<script>
import { mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbDropdown, mdbDropdownToggle, mdbDropdownItem, mdbDropdownMenu } from 'mdbvue';
export default {
components: {
mdbNavbar,
mdbNavbarBrand,
mdbNavbarToggler,
mdbNavbarNav,
mdbNavItem,
mdbDropdown,
mdbDropdown,
mdbDropdownToggle,
mdbDropdownItem,
mdbDropdownMenu
}
}
</script>
Forms
Place various form controls and components within a navbar with .form-inline
class
or <form-inline>
component.
<template>
<mdb-navbar color="default" dark>
<mdb-form-inline >
<mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
<mdb-btn outline="white" size="sm" class="my-0" type="submit">Search</mdb-btn>
</mdb-form-inline>
</mdb-navbar>
</template>
<script>
import { mdbNavbar, mdbBtn, mdbFormInline, mdbInput } from 'mdbvue';
export default {
components: {
mdbNavbar,
mdbBtn,
mdbFormInline,
mdbInput
}
}
</script>
Heading
Align the contents of your inline forms with utilities as needed.
<template>
<mdb-navbar color="default" dark class="justify-content-between">
<mdb-navbar-brand href="#">
Navbar
</mdb-navbar-brand>
<mdb-form-inline>
<mdb-input class="mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
<mdb-btn outline="white" size="sm" class="my-0" type="submit">Search</mdb-btn>
</mdb-form-inline>
</mdb-navbar>
</template>
<script>
import { mdbNavbar, mdbNavbarBrand, mdbBtn, mdbFormInline, mdbInput } from 'mdbvue';
export default {
components: {
mdbNavbar,
mdbBtn,
mdbNavbarBrand,
mdbFormInline,
mdbInput
}
}
</script>
Input groups work, too:
<template>
<mdb-navbar color="default" dark>
<mdb-form-inline>
<mdb-input placeholder="Username" class="mt-0">
<span class="input-group-text" slot="prepend">@</span>
</mdb-input>
</mdb-form-inline>
</mdb-navbar>
</template>
<script>
import { mdbNavbar, mdbFormInline, mdbInput } from 'mdbvue';
export default {
components: {
mdbNavbar,
mdbFormInline,
mdbInput
}
}
</script>
Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
<template>
<mdb-navbar color="indigo">
<mdb-form-inline>
<mdb-btn outline="success" type="button">Search</mdb-btn>
<mdb-btn outline="secondary" size="sm" type="button">Search</mdb-btn>
</mdb-form-inline>
</mdb-navbar>
</template>
<script>
import { mdbNavbar, mdbBtn, mdbFormInline } from 'mdbvue';
export default {
components: {
mdbNavbar,
mdbBtn,
mdbFormInline
}
}
</script>
Text
Navbars may contain bits of text with the help of .navbar-text
. This class
adjusts vertical alignment
and horizontal spacing for strings of text.
<template>
<mdb-navbar color="indigo">
<span class="navbar-text white-text">
Navbar text with an inline element
</span>
</mdb-navbar>
</template>
<script>
import { mdbNavbar } from 'mdbvue';
export default {
name: 'NavbarPage',
components: {
mdbNavbar
}
}
</script>
Mix and match with other components and utilities as needed.
<template>
<mdb-navbar color="indigo" class="white-text">
<mdb-navbar-brand href="#">
Navbar / text
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav >
<mdb-nav-item anchorClass="white-text" href="#" active>Home</mdb-nav-item>
<mdb-nav-item anchorClass="white-text" href="#">Features</mdb-nav-item>
<mdb-nav-item anchorClass="white-text" href="#">Pricing</mdb-nav-item>
</mdb-navbar-nav>
<span class="navbar-text">
Navbar text with an inline element
</span>
</mdb-navbar-toggler>
</mdb-navbar>
</template>
<script>
import { mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem } from 'mdbvue';
export default {
components: {
mdbNavbar,
mdbNavbarBrand,
mdbNavbarToggler,
mdbNavbarNav,
mdbNavItem
}
}
</script>
Containers
Although it’s not required, you can wrap a navbar in a <mdb-container>
to
center it on a page or add one
within to only center the contents of a fixed or static top navbar
<template>
<mdb-container>
<mdb-navbar color="secondary" dark>
<mdb-navbar-brand href="https://mdbootstrap.com/">
Navbar
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item href="#" active>Home</mdb-nav-item>
<mdb-nav-item href="#">Features</mdb-nav-item>
<mdb-nav-item href="#">Pricing</mdb-nav-item>
</mdb-navbar-nav>
<form>
<mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
</form>
</mdb-navbar-toggler>
</mdb-navbar>
</mdb-container>
</template>
<script>
import { mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbInput, mdbContainer } from 'mdbvue';
export default {
name: 'NavbarPage',
components: {
mdbNavbar,
mdbNavbarBrand,
mdbNavbarToggler,
mdbNavbarNav,
mdbNavItem,
mdbInput,
mdbContainer
}
}
</script>
Placement
Use our position
prop to place navbars in non-static positions. Choose from
fixed to the top, fixed to the bottom,
or stickied to the top. Note that position: sticky
, used for .sticky-top
, isn’t
fully supported in every browser.
Fixed top
<template>
<mdb-navbar color="info" position="top" dark>
<mdb-navbar-brand href="https://mdbootstrap.com/">
Navbar
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item href="#" active>Home</mdb-nav-item>
<mdb-nav-item href="#">Features</mdb-nav-item>
<mdb-nav-item href="#">Pricing</mdb-nav-item>
</mdb-navbar-nav>
<form>
<mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
</form>
</mdb-navbar-toggler>
</mdb-navbar>
</template>
<script>
import { mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbInput } from 'mdbvue';
export default {
name: 'NavbarPage',
components: {
mdbNavbar,
mdbNavbarBrand,
mdbNavbarToggler,
mdbNavbarNav,
mdbNavItem,
mdbInput
}
}
</script>
Fixed bottom
<template>
<mdb-navbar color="default" position="bottom" dark>
<mdb-navbar-brand href="https://mdbootstrap.com/">
Navbar
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item href="#" active>Home</mdb-nav-item>
<mdb-nav-item href="#">Features</mdb-nav-item>
<mdb-nav-item href="#">Pricing</mdb-nav-item>
</mdb-navbar-nav>
<form>
<mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
</form>
</mdb-navbar-toggler>
</mdb-navbar>
</template>
<script>
import { mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbInput } from 'mdbvue';
export default {
name: 'NavbarPage',
components: {
mdbNavbar,
mdbNavbarBrand,
mdbNavbarToggler,
mdbNavbarNav,
mdbNavItem,
mdbInput
}
}
</script>
Sticky top
<template>
<mdb-navbar color="secondary" position="top" dark>
<mdb-navbar-brand href="https://mdbootstrap.com/">
Navbar
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item href="#" active>Home</mdb-nav-item>
<mdb-nav-item href="#">Features</mdb-nav-item>
<mdb-nav-item href="#">Pricing</mdb-nav-item>
</mdb-navbar-nav>
<form>
<mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
</form>
</mdb-navbar-toggler>
</mdb-navbar>
</template>
<script>
import { mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbInput } from 'mdbvue';
export default {
name: 'NavbarPage',
components: {
mdbNavbar,
mdbNavbarBrand,
mdbNavbarToggler,
mdbNavbarNav,
mdbNavItem,
mdbInput
}
}
</script>
Responsive behaviors
Navbars can utilize expand
prop to change when their content collapses behind a
button. By adding small
, medium
, large
you can easily choose when to
show or hide particular elements.
Toggler
Navbar togglers are left-aligned by default, but should they follow a sibling element like a
<mdb-navbar-brand>
,
they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the
toggler.
Below are examples of different toggle styles.
With a brand name shown on the left and toggler on the right:
<template>
<mdb-navbar expand="large" dark color="indigo">
<!-- Navbar brand -->
<mdb-navbar-brand href="#">
Navbar
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item href="#" active>Home</mdb-nav-item>
<mdb-nav-item href="#">Link</mdb-nav-item>
<mdb-nav-item class="disabled" href="#">Disabled</mdb-nav-item>
</mdb-navbar-nav>
</mdb-navbar-toggler>
</mdb-navbar>
</template>
<script>
import { mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem } from 'mdbvue';
export default {
name: 'NavbarPage',
components: {
mdbNavbar,
mdbNavbarBrand,
mdbNavbarToggler,
mdbNavbarNav,
mdbNavItem
}
}
</script>
Vue Bootstrap Navbar - API
In this section you will find advanced information about the Navbar component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.
API Reference: mdbNavbarBrand Properties
The table below shows the configuration options of the mdb-navbar-brand
component.
Name | Type | Default | Description | Example |
---|---|---|---|---|
tag |
String | 'a' |
Sets component's tag |
<mdb-navbar-brand tag="div" />
|
to |
String |
|
The prop turns the component into a router-link . Useful in case you would like to serve as a home button. |
<MDBNavbarBrand to="https://mdbootstrap.com/docs/b4/vue/navigation/navbar/" />
|
waves |
Boolean |
|
Would you like some waves with that? |
<MDBNavbarBrand waves" />
|
API Reference: mdbNavItem Properties
The table below shows the configuration options of the mdb-navbar-nav
component.
Name | Type | Default | Description | Example |
---|---|---|---|---|
tag |
String | 'li' |
Sets component's tag |
<mdb-navbar-brand tag="div" />
|
active |
Boolean | false |
Sets NavItem's state to active |
<mdb-nav-item :active="chechIfActive" />
|
disabled |
Boolean | false |
Turns the element link disabled |
<mdb-nav-item :disabled="AreYouDisabled" />
|
exact |
Boolean | false |
Active class maching is inclusive. Use the prop to have the component turn into active state only when the href prop matches the $route.path exactly. Available for router propped component only |
<mdb-nav-item href="/" exact="AreYouDisabled" />
|
href |
String | -- |
An outside URL a click should lead to |
<mdb-nav-item href="http://www.yeah.why.not.here" />
|
newTab |
Boolean | false |
Used to have a page opened in a fresh browser's tab. Equivalent to good ol' target="_blank" anchor element attribute |
<mdb-nav-item :waves="false" />
|
to |
String | -- |
Using this prop instead of href causes the component to render a router-link . Utilize it to navigate inside your SPA project. |
<mdb-nav-item :waves="false" />
|
waves |
Boolean | false |
Sets up a wave effect upon clicking the component. Use wavesFixed prop in fixed elements instead |
<mdb-nav-item :waves="false" />
|
icon |
String |
|
Adds an icon next to nav item |
<mdb-nav-item icon="code-branch" />
|
far |
Boolean | false |
Both props are chanding icon's style to regular |
<mdb-nav-item icon="..." far />
|
fal |
Boolean | false |
Both props are chanding icon's style to light |
<mdb-nav-item icon="..." fal />
|
fab |
Boolean | false |
Both props are chanding icon's style to brands |
<mdb-nav-item icon="..." fab />
|
fad |
Boolean | false |
Both props are chanding icon's style to duotone |
<mdb-nav-item icon="..." fad />
|
anchorClass |
String |
|
Add class to the anchor element |
<mdb-nav-item anchorClass="custom-class" />
|
API Reference: mdbNavbarToggler Properties
The table below shows the configuration options of the mdbNavbarToggler component.
Name | Type | Default | Description | Example |
---|---|---|---|---|
tag |
String | 'li' |
Sets component's tag |
<mdb-navbar-toggler tag="div" />
|