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 using expand 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 a tag="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

Live demo 
        
            
      <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

Live demo 
        
            
      <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

Live demo 
        
            
      <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

Live demo 
        
            
      <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: mdbNavbar Properties

The table below shows the configuration options of the mdb-navbar component.

Name Type Default Description Example
tag String 'nav' Sets component's tag <mdb-navbar tag="div" />
animation String, Number <mdb-navbar animation="1" />
color String Sets navbars background color. Use our color palette <mdb-navbar color="indigo" />
dark Boolean false Adjusts font color to contrast with darker navbar color <mdb-navbar dark />
light Boolean false Adjusts font color to contrast with lighter navbar color <mdb-navbar light />
container Boolean false Adds a container wrapper inside navbar's content <mdb-navbar container />
double Boolean false Makes the navbar a great feat with a SideNav <mdb-navbar double />
expand String 'small' Determines on which viewport navbar should be expanded. Accepts: sm / small, md / medium, lg / large. If empty - navbar will not collapse. <mdb-navbar expand="md" />
navIconClass String -- Set the toggler CSS class <mdb-navbar position="top" />
position String Setting the prop makes the navbar fixed. Accpeted values are "top" and "bottom" <mdb-navbar position="top" />
scrolling Boolean false Changes Navbar's size on scroll. Combine with prop transparent to achive color changing effect <mdb-navbar scrolling />
scrollingOffset Number 100 Represents the number of pixels scrolled vertically above which the 'scrolling' effect is applied <mdb-navbar :scrollingOffset={100} />
togglerClass String -- Helps to set custom styles on the hamburger wrapper <mdb-navbar :scrollingOffset={100} />
transparent Boolean false Sets Navbar background to transparent. Combine with prop scrolling and color props to achive color changing effect <mdb-navbar transparent />
toggler Boolean true Set to false prevents a navbar from collapsing into hamburger menu <mdb-navbar :toggler="false" />
hamburger Boolean Set to true enables setting custom toggling icons <mdb-navbar hamburger />
togglerIcon String 'bars' Changes the toggling icon <mdb-navbar hamburger togglerIcon="heart" />
togglerIconClass String Sets the toggling icon's classes <mdb-navbar hamburger togglerIcon="heart" togglerIconClass="red-text"/>
togglerSize String '1x' Changes the toggling icon's size <mdb-navbar hamburger togglerIcon="heart" togglerSize="2x" />
far Boolean false Changes the toggling icon's style to regular <mdb-navbar hamburger togglerIcon="..." far />
fal Boolean false Changes the toggling icon's style to light <mdb-navbar hamburger togglerIcon="..." fal />
fab Boolean false Changes the toggling icon's style to brands <mdb-navbar hamburger togglerIcon="..." fab />
fad Boolean false Changes the toggling icon's style to duotone (Fa premium) <mdb-navbar hamburger togglerIcon="..." fad />

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: mdbNavbarNav Properties

The table below shows the configuration options of the mdb-navbar-nav component.

Name Type Default Description Example
tag String 'ul' Sets component's tag <mdb-navbar-nav tag="div" />
center Boolean false Set to true to justify content to the center <mdb-navbar-nav center />
justifyAround Boolean false Changes justification to the around <mdb-navbar-nav center />
right Boolean false Does the this as left, but does it right <mdb-navbar-nav right />
vertical Boolean false Changes the flex direction to the column <mdb-navbar-nav vertical />

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" />