Navbar

Vue Bootstrap 5 Navbar component

Documentation and examples for powerful, responsive navigation header - MDB navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

Basic example

A basic example of the navbar with the most common elements like link, search form, and brand. All of them are explained in detail in the supported content section.

Note: this example uses color (bg="light") and spacing (my-2, my-lg-0, me-sm-0, my-sm-0) utility classes. 

        
            
            <template>
              <MDBNavbar expand="lg" light bg="light" container>
                <MDBNavbarBrand href="#">Brand</MDBNavbarBrand>
                <MDBNavbarToggler
                  @click="collapse1 = !collapse1"
                  target="#navbarSupportedContent"
                ></MDBNavbarToggler>
                <MDBCollapse v-model="collapse1" id="navbarSupportedContent">
                  <MDBNavbarNav class="mb-2 mb-lg-0">
                    <MDBNavbarItem to="#" active>
                      Home
                    </MDBNavbarItem>
                    <MDBNavbarItem href="#">
                      Link
                    </MDBNavbarItem>
                    <MDBNavbarItem>
                      <!-- Navbar dropdown -->
                      <MDBDropdown class="nav-item" v-model="dropdown1">
                        <MDBDropdownToggle
                          tag="a"
                          class="nav-link"
                          @click="dropdown1 = !dropdown1"
                          >Dropdown</MDBDropdownToggle
                        >
                        <MDBDropdownMenu aria-labelledby="dropdownMenuButton">
                          <MDBDropdownItem href="#">Action</MDBDropdownItem>
                          <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                          <MDBDropdownItem href="#"
                            >Something else here</MDBDropdownItem
                          >
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </MDBNavbarItem>
                    <MDBNavbarItem to="#" disabled>
                      Disabled
                    </MDBNavbarItem>
                  </MDBNavbarNav>
                  <!-- Search form -->
                  <form class="d-flex input-group w-auto">
                    <input
                      type="search"
                      class="form-control"
                      placeholder="Type query"
                      aria-label="Search"
                    />
                    <MDBBtn outline="primary">
                      Search
                    </MDBBtn>
                  </form>
                </MDBCollapse>
              </MDBNavbar>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBBtn,
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarBrand,
                MDBNavbarNav,
                MDBNavbarItem,
                MDBCollapse,
                MDBDropdown,
                MDBDropdownToggle,
                MDBDropdownMenu,
                MDBDropdownItem
              } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';
              export default {
                components: {
                  MDBBtn,
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBNavbarBrand,
                  MDBNavbarNav,
                  MDBNavbarItem,
                  MDBCollapse,
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem
                },
                setup() {
                  const collapse1 = ref(false);
                  const dropdown1 = ref(false);
                  return {
                    collapse1,
                    dropdown1
                  }
                }
              };
            </script>

How it works

Here’s what you need to know before getting started with the navbar:

  • Navbars require a wrapping MDBNavbar with expand{sm|md|lg|xl|xxl} prop for responsive collapsing and color scheme classes.
  • Navbars and their contents are fluid by default. Change the container to limit their horizontal width in different ways.
  • Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
  • Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
  • Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
  • Indicate the current item by using aria-current="page" for the current page or aria-current="true" for the current item in a set.

Supported content

Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:

  • MDBNavbarBrand for your company, product, or project name.
  • MDBNavbarNav for a full-height and lightweight navigation.
  • MDBNavbarToggler for use with our collapse plugin and other navigation toggling behaviors.
  • Flex and spacing utilities for any form controls and actions.
  • .navbar-text for adding vertically centered strings of text.
  • Use collapse prop inside MDBNavbarNav for grouping and hiding navbar contents by a parent breakpoint.

Apart from listed above, navbar supports also components like breadcrumbs, forms, buttons, icons, flags, avatars, badges, and a few more.

Brand

The MDBNavbarBrand component is div by default, but it can be changed to most elements. When href props is passed to the component it becomes an anchor. 


        
            
              <template>
                <!-- As a link -->
                <MDBNavbar light bg="light" container>
                  <MDBNavbarBrand href="#">Navbar</MDBNavbarBrand>
                </MDBNavbar>
                <!-- As a heading -->
                <MDBNavbar light bg="light" container>
                  <MDBNavbarBrand class="h1">Navbar</MDBNavbarBrand>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import { MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
                export default {
                  components: { MDBNavbar },
                };
              </script>

Adding images to the MDBNavbarBrand will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate. 

        
            
              <template>
                <!-- Just an image -->
                <MDBNavbar light bg="light" container>
                  <MDBNavbarBrand href="#">
                    <img
                      src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp"
                      height="30"
                      alt=""
                      loading="lazy"
                    />
                  </MDBNavbarBrand>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import { MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBNavbar,
                    MDBNavbarBrand,
                  },
                };
              </script>
            
        
    
        
            
              <template>
                <!-- Image and text -->
                <MDBNavbar light bg="light" container>
                  <MDBNavbarBrand href="#">
                    <img
                      src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp"
                      height="30"
                      alt=""
                      loading="lazy"
                    />
                    MDBootstrap
                  </MDBNavbarBrand>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import { MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBNavbar,
                    MDBNavbarBrand,
                  },
                };
              </script>

Nav

Navbar navigation links build on our MDBNavbar options with their own modifier props and require the use of MDBNavbarToggler props 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 active props to indicate the current page can be applied to MDBNavbarItem. If to or href prop is active it will be applied to nav-link and if not, active class will be applied directly to nav-item 

        
            
              <template>
                <MDBNavbar light bg="light" expand="lg" container>
                  <MDBNavbarBrand href="#">Navbar</MDBNavbarBrand>
                  <MDBNavbarToggler target="navbarNav"></MDBNavbarToggler>
                  <MDBNavbarNav collapse="navbarNav">
                    <MDBNavbarItem to="#" active> Home </MDBNavbarItem>
                    <MDBNavbarItem to="#"> Features </MDBNavbarItem>
                    <MDBNavbarItem to="#"> Pricing </MDBNavbarItem>
                    <MDBNavbarItem to="#" disabled> Disabled </MDBNavbarItem>
                  </MDBNavbarNav>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import {
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBNavbarBrand,
                  DBNavbarNav,
                  MDBNavbarItem,
                } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBNavbar,
                    MDBNavbarToggler,
                    MDBNavbarBrand,
                    MDBNavbarNav,
                    MDBNavbarItem,
                  },
                };
              </script>

Forms

Place various form controls and components within a navbar:

        
            
              <template>
                <MDBNavbar light bg="light" container>
                  <form class="d-flex input-group w-auto">
                    <input
                      type="search"
                      class="form-control"
                      placeholder="Type query"
                      aria-label="Search"
                    />
                    <MDBBtn outline="primary"> Search </MDBBtn>
                  </form>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import { MDBBtn, MDBNavbar } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBBtn,
                    MDBNavbar,
                  },
                };
              </script>

Immediate children elements in MDBNavbar use flex layout and will default to justify-content: space-between. Use additional flex utilities as needed to adjust this behavior. 

        
            
              <template>
                <MDBNavbar light bg="light" container>
                  <MDBNavbarBrand href="#">Navbar</MDBNavbarBrand>
                  <form class="d-flex input-group w-auto">
                    <input
                      type="search"
                      class="form-control"
                      placeholder="Type query"
                      aria-label="Search"
                    />
                    <MDBBtn outline="primary"> Search </MDBBtn>
                  </form>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import { MDBBtn, MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBBtn,
                    MDBNavbar,
                    MDBNavbarBrand,
                  },
                };
              </script>

White form for dark theme.

        
            
              <template>
                <MDBNavbar dark bg="dark" container>
                  <form class="d-flex input-group w-auto">
                    <input
                      type="search"
                      class="form-control"
                      placeholder="Type query"
                      aria-label="Search"
                    />
                    <MDBBtn outline="white"> Search </MDBBtn>
                  </form>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import { MDBBtn, MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBBtn,
                    MDBNavbar,
                    MDBNavbarBrand,
                  },
                };
              </script>

Buttons

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>
                <MDBNavbar light bg="light" container classContainer="justify-content-start">
                  <MDBBtn outline="success" class="me-2"> Main button </MDBBtn>
                  <MDBBtn size="sm" outline="secondary"> Smaller button </MDBBtn>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import { MDBBtn, MDBNavbar } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBBtn,
                    MDBNavbar,
                  },
                };
              </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>
                <MDBNavbar light bg="light" container>
                  <span class="navbar-text"> Navbar text with an inline element </span>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import { MDBNavbar } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBNavbar,
                  },
                };
              </script>

Mix and match with other components and utilities as needed.

        
            
              <template>
                <MDBNavbar expand="lg" light bg="light" container>
                  <MDBNavbarBrand href="#">Navbar w/ text</MDBNavbarBrand>
                  <MDBNavbarToggler target="#navbarText"></MDBNavbarToggler>
                  <MDBNavbarNav collapse="navbarText">
                    <MDBNavbarItem href="#"> Home </MDBNavbarItem>
                    <MDBNavbarItem href="#"> Features </MDBNavbarItem>
                    <MDBNavbarItem href="#"> Pricing </MDBNavbarItem>
                    <template v-slot:contentRight>
                      <span class="navbar-text"> Navbar text with an inline element </span>
                    </template>
                  </MDBNavbarNav>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import {
                  MDBNavbar,
                  MDBNavbarBrand,
                  MDBNavbarToggler,
                  MDBNavbarNav,
                  MDBNavbarItem,
                } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBNavbar,
                    MDBNavbarBrand,
                    MDBNavbarToggler,
                    MDBNavbarNav,
                    MDBNavbarItem,
                  },
                };
              </script>

Dropdown

You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for MDBNavbarItem and .nav-link as shown below.

Learn more about dropdowns in our dropdown docs. 

        
            
              <template>
                <MDBNavbar expand="lg" light bg="light" container>
                  <MDBNavbarNav>
                    <!-- Dropdown -->
                    <MDBDropdown v-model="dropdown2">
                      <MDBDropdownToggle tag="a" class="nav-link" @click="dropdown2 = !dropdown2"
                        >Dropdown</MDBDropdownToggle
                      >
                      <MDBDropdownMenu>
                        <MDBDropdownItem href="#">Action</MDBDropdownItem>
                        <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                        <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                      </MDBDropdownMenu>
                    </MDBDropdown>
                  </MDBNavbarNav>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import {
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBNavbarBrand,
                  MDBNavbarNav,
                  MDBNavbarItem,
                  MDBCollapse,
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem,
                } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';
                export default {
                  components: {
                    MDBNavbar,
                    MDBNavbarToggler,
                    MDBNavbarBrand,
                    MDBNavbarNav,
                    MDBNavbarItem,
                    MDBCollapse,
                    MDBDropdown,
                    MDBDropdownToggle,
                    MDBDropdownMenu,
                    MDBDropdownItem,
                  },
                  setup() {
                    const dropdown2 = ref(false);
                    return {
                      dropdown2,
                    };
                  },
                };
              </script>

Breadcrumb

Very common use case - breadcrumb in the navbar.

        
            
              <template>
                <MDBNavbar expand="lg" light bg="light" container>
                  <nav aria-label="breadcrumb">
                    <MDBBreadcrumb>
                      <MDBBreadcrumbItem><a href="#">Home</a></MDBBreadcrumbItem>
                      <MDBBreadcrumbItem><a href="#">Library</a></MDBBreadcrumbItem>
                      <MDBBreadcrumbItem active>
                        <a href="#">Data</a>
                      </MDBBreadcrumbItem>
                    </MDBBreadcrumb>
                  </nav>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBNavbar,
                    MDBBreadcrumb,
                    MDBBreadcrumbItem,
                  },
                };
              </script>

Icons

Choose from hundreds of our icons and simply add them to the navbar.

Note: We add .d-flex .flex-row classes to keep the icons inline when the navbar is collapsed. Without this, they will stack one under another. 

        
            
              <template>
                <MDBNavbar expand="lg" light bg="light" container>
                  <MDBNavbarNav class="d-flex flex-row">
                    <!-- Icons -->
                    <MDBNavbarItem to="#" class="me-3 me-lg-0">
                      <MDBIcon icon="shopping-cart"></MDBIcon>
                    </MDBNavbarItem>
                    <MDBNavbarItem href="#" class="me-3 me-lg-0">
                      <MDBIcon iconStyle="fab" icon="twitter"></MDBIcon>
                    </MDBNavbarItem>
                    <!-- Icon dropdown -->
                    <MDBNavbarItem class="me-3 me-lg-0 dropdown">
                      <MDBDropdown v-model="dropdown3">
                        <MDBDropdownToggle
                          tag="a"
                          class="nav-link"
                          @click="dropdown3 = !dropdown3"
                        >
                          <MDBIcon icon="user" />
                        </MDBDropdownToggle>
                        <MDBDropdownMenu>
                          <MDBDropdownItem href="#">Action</MDBDropdownItem>
                          <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                          <MDBDropdownItem href="#"
                            >Something else here</MDBDropdownItem
                          >
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </MDBNavbarItem>
                  </MDBNavbarNav>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
               import {
                  MDBIcon,
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBNavbarBrand,
                  MDBNavbarNav,
                  MDBNavbarItem,
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem
                } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';
                export default {
                  components: {
                    MDBIcon,
                    MDBNavbar,
                    MDBNavbarToggler,
                    MDBNavbarBrand,
                    MDBNavbarNav,
                    MDBNavbarItem,
                    MDBDropdown,
                    MDBDropdownToggle,
                    MDBDropdownMenu,
                    MDBDropdownItem
                  },
                  setup() {
                    const dropdown3 = ref(false);
                    return {
                      dropdown3
                    }
                  }
                };
              </script>

Badges

Badges can be very useful for presenting counters, for example in the shopping cart. 

        
            
              <template>
                <MDBNavbar expand="lg" light bg="light" container>
                  <MDBNavbarNav>
                    <!-- Badge -->
                    <MDBNavbarItem href="#">
                      <span class="badge badge-pill bg-danger">1</span>
                      <span><MDBIcon icon="shopping-cart"></MDBIcon></span>
                    </MDBNavbarItem>
                  </MDBNavbarNav>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import { MDBNavbar, MDBNavbarNav, MDBNavbarItem, MDBIcon } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBNavbar,
                    MDBNavbarNav,
                    MDBNavbarItem,
                    MDBIcon,
                  },
                };
              </script>

Notifications

You can mix icon with dropdown and create a notification dropdown to indicate important news for visitors. 

        
            
              <template>
                <MDBNavbar expan="lg" light bg="light" container>
                  <MDBNavbarNav>
                    <!-- Notification dropdown -->
                    <MDBDropdown class="nav-item" v-model="dropdown4">
                      <MDBDropdownToggle tag="a" class="nav-link" @click="dropdown4 = !dropdown4"
                        ><MDBIcon icon="bell" />
                        <MDBBadge notification color="danger" pill>1</MDBBadge>
                      </MDBDropdownToggle>
                      <MDBDropdownMenu>
                        <MDBDropdownItem href="#">Action</MDBDropdownItem>
                        <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                        <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                      </MDBDropdownMenu>
                    </MDBDropdown>
                    <!-- Notification dropdown -->
                  </MDBNavbarNav>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import {
                  MDBIcon,
                  MDBBadge,
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBNavbarBrand,
                  MDBNavbarNav,
                  MDBNavbarItem,
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem,
                } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';
                export default {
                  components: {
                    MDBIcon,
                    MDBBadge,
                    MDBNavbar,
                    MDBNavbarToggler,
                    MDBNavbarBrand,
                    MDBNavbarNav,
                    MDBNavbarItem,
                    MDBDropdown,
                    MDBDropdownToggle,
                    MDBDropdownMenu,
                    MDBDropdownItem,
                  },
                  setup() {
                    const dropdown4 = ref(false);
                    return {
                      dropdown4,
                    };
                  },
                };
              </script>

Flags

Use dropdown together with flags to create a language switch. 

        
            
              <template>
                <MDBNavbar expand="lg" light bg="light" container>
                  <MDBNavbarNav>
                    <!-- Icon dropdown -->
                    <MDBDropdown class="nav-item" v-model="dropdown5">
                      <MDBDropdownToggle tag="a" class="nav-link" @click="dropdown5 = !dropdown5">
                        <MDBIcon flag="united-kingdom" class="m-0"></MDBIcon>
                      </MDBDropdownToggle>
                      <MDBDropdownMenu>
                        <MDBDropdownItem href="#"
                          ><MDBIcon flag="united-kingdom" />English
                          <MDBIcon icon="check" class="text-success ms-2"></MDBIcon>
                        </MDBDropdownItem>
                        <MDBDropdownItem divider />
                        <MDBDropdownItem href="#"><MDBIcon flag="poland" />Polski </MDBDropdownItem>
                        <MDBDropdownItem href="#"><MDBIcon flag="china" />中文 </MDBDropdownItem>
                        <MDBDropdownItem href="#"><MDBIcon flag="japan" />日本語 </MDBDropdownItem>
                        <MDBDropdownItem href="#"><MDBIcon flag="germany" />Deutsch </MDBDropdownItem>
                        <MDBDropdownItem href="#"><MDBIcon flag="france" />Français </MDBDropdownItem>
                        <MDBDropdownItem href="#"><MDBIcon flag="spain" />Español </MDBDropdownItem>
                        <MDBDropdownItem href="#"><MDBIcon flag="russia" />Русский </MDBDropdownItem>
                        <MDBDropdownItem href="#"
                          ><MDBIcon flag="portugal" />Português
                        </MDBDropdownItem>
                      </MDBDropdownMenu>
                    </MDBDropdown>
                  </MDBNavbarNav>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import {
                  MDBNavbar,
                  MDBNavbarNav,
                  MDBNavbarItem,
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem,
                  MDBIcon,
                } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';
                export default {
                  components: {
                    MDBNavbar,
                    MDBNavbarNav,
                    MDBNavbarItem,
                    MDBDropdown,
                    MDBDropdownToggle,
                    MDBDropdownMenu,
                    MDBDropdownItem,
                    MDBIcon,
                  },
                  setup() {
                    const dropdown5 = ref(false);
                    return {
                      dropdown5,
                    };
                  },
                };
              </script>

Avatar

By combining simple image and dropdown you can create an avatar with typical user options. 

        
            
              <template>
                <MDBNavbar expand="lg" light bg="light" container>
                  <MDBNavbarNav>
                    <!-- Avatar -->
                    <MDBDropdown class="nav-item" v-model="dropdown6">
                      <MDBDropdownToggle tag="a" class="nav-link" @click="dropdown6 = !dropdown6"
                        ><img
                          src="https://mdbootstrap.com/img/Photos/Avatars/img (31).webp"
                          class="rounded-circle"
                          height="22"
                          alt=""
                          loading="lazy"
                        />
                      </MDBDropdownToggle>
                      <MDBDropdownMenu>
                        <MDBDropdownItem href="#">My profile</MDBDropdownItem>
                        <MDBDropdownItem href="#">Settings</MDBDropdownItem>
                        <MDBDropdownItem href="#">Logout</MDBDropdownItem>
                      </MDBDropdownMenu>
                    </MDBDropdown>
                  </MDBNavbarNav>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import {
                  MDBNavbar,
                  MDBNavbarNav,
                  MDBNavbarItem,
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem,
                } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';
                export default {
                  components: {
                    MDBNavbar,
                    MDBNavbarNav,
                    MDBNavbarItem,
                    MDBDropdown,
                    MDBDropdownToggle,
                    MDBDropdownMenu,
                    MDBDropdownItem,
                  },
                  setup() {
                    const dropdown6 = ref(false);
                    return {
                      dropdown6,
                    };
                  },
                };
              </script>

Content alignment

Navbar content is aligned left by default. To align navbar content to the right use right prop. For other alignments check API section or flexbox utilities.

Left aligned

Content is left aligned by default

        
            
            <template>
              <MDBNavbar expand="lg" light bg="light" container>
                <!-- Toggle button -->
                <MDBNavbarToggler
                  target="#navbarLeftAlignExample"
                  @click="collapse4 = !collapse4"
                ></MDBNavbarToggler>
                <!-- Collapsible wrapper -->
                <MDBCollapse v-model="collapse4" id="navbarLeftAlignExample">
                  <MDBNavbarNav class="mb-lg-0">
                    <!-- Left links -->
                    <MDBNavbarItem to="#" active>
                      Home
                    </MDBNavbarItem>
                    <MDBNavbarItem href="#" active>
                      Link
                    </MDBNavbarItem>
                    <!-- Navbar dropdown -->
                    <MDBDropdown class="nav-item" v-model="dropdown7">
                      <MDBDropdownToggle
                        tag="a"
                        class="nav-link"
                        @click="dropdown7 = !dropdown7"
                        >Dropdown</MDBDropdownToggle
                      >
                      <MDBDropdownMenu>
                        <MDBDropdownItem href="#">Action</MDBDropdownItem>
                        <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                        <MDBDropdownItem href="#"
                          >Something else here</MDBDropdownItem
                        >
                      </MDBDropdownMenu>
                    </MDBDropdown>
                    <MDBNavbarItem
                      to="#"
                      disabled
                      tabindex="-1"
                      aria-disabled="true"
                    >
                      Disabled
                    </MDBNavbarItem>
                    <!-- Left links -->
                  </MDBNavbarNav>
                </MDBCollapse>
                <!-- Collapsible wrapper -->
              </MDBNavbar>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarBrand,
                MDBNavbarNav,
                MDBNavbarItem,
                MDBCollapse,
                MDBDropdown,
                MDBDropdownToggle,
                MDBDropdownMenu,
                MDBDropdownItem
              } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';
              export default {
                components: {
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBNavbarBrand,
                  MDBNavbarNav,
                  MDBNavbarItem,
                  MDBCollapse,
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem
                },
                setup() {
                  const collapse4 = ref(false);
                  const dropdown7 = ref(false);
                  return {
                    collapse4,
                    dropdown7
                  }
                }
              };
            </script>

Right aligned

Add right props next to the MDBNavbarNav to align the content to the right. 

        
            
            <template>
              <MDBNavbar expand="lg" light bg="light" container>
                <!-- Toggle button -->
                <MDBNavbarToggler
                  target="#navbarRightAlignExample"
                  @click="collapse5 = !collapse5"
                ></MDBNavbarToggler>
                <!-- Collapsible wrapper -->
                <MDBCollapse v-model="collapse5" id="navbarRightAlignExample">
                  <MDBNavbarNav right class="mb-2 mb-lg-0">
                    <!-- Right links -->
                    <MDBNavbarItem to="#" active>
                      Home
                    </MDBNavbarItem>
                    <MDBNavbarItem href="#" active>
                      Link
                    </MDBNavbarItem>
                    <!-- Navbar dropdown -->
                    <MDBDropdown class="nav-item" v-model="dropdown8">
                      <MDBDropdownToggle
                        tag="a"
                        class="nav-link"
                        @click="dropdown8 = !dropdown8"
                        >Dropdown</MDBDropdownToggle
                      >
                      <MDBDropdownMenu>
                        <MDBDropdownItem href="#">Action</MDBDropdownItem>
                        <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                        <MDBDropdownItem href="#"
                          >Something else here</MDBDropdownItem
                        >
                      </MDBDropdownMenu>
                    </MDBDropdown>
                    <MDBNavbarItem
                      to="#"
                      disabled
                      tabindex="-1"
                      aria-disabled="true"
                    >
                      Disabled
                    </MDBNavbarItem>
                    <!-- Right links -->
                  </MDBNavbarNav>
                </MDBCollapse>
                <!-- Collapsible wrapper -->
              </MDBNavbar>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarBrand,
                MDBNavbarNav,
                MDBNavbarItem,
                MDBCollapse,
                MDBDropdown,
                MDBDropdownToggle,
                MDBDropdownMenu,
                MDBDropdownItem
              } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';
              export default {
                components: {
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBNavbarBrand,
                  MDBNavbarNav,
                  MDBNavbarItem,
                  MDBCollapse,
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem
                },
                setup() {
                  const collapse5 = ref(false);
                  const dropdown8 = ref(false);
                  return {
                    collapse5,
                    dropdown8
                  }
                }
              };
            </script>

Centered

Use center and collapse props next to the MDBNavbarNav to center the content. 

        
            
            <template>
              <MDBNavbar expand="lg" light bg="light" container>
                <!-- Toggle button -->
                <MDBNavbarToggler
                  target="#navbarCenterAlignExample"
                  @click="collapse6 = !collapse6"
                ></MDBNavbarToggler>
                <!-- Collapsible wrapper -->
                <MDBCollapse id="navbarCenterAlignExample" v-model="collapse6">
                  <MDBNavbarNav center class="mb-2 mb-lg-0">
                    <!-- Center links -->
                    <MDBNavbarItem to="#" active>
                      Home
                    </MDBNavbarItem>
                    <MDBNavbarItem href="#" active>
                      Link
                    </MDBNavbarItem>
                    <!-- Navbar dropdown -->
                    <MDBDropdown class="nav-item" v-model="dropdown9">
                      <MDBDropdownToggle
                        tag="a"
                        class="nav-link"
                        @click="dropdown9 = !dropdown9"
                        >Dropdown</MDBDropdownToggle
                      >
                      <MDBDropdownMenu>
                        <MDBDropdownItem href="#">Action</MDBDropdownItem>
                        <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                        <MDBDropdownItem href="#"
                          >Something else here</MDBDropdownItem
                        >
                      </MDBDropdownMenu>
                    </MDBDropdown>
                    <MDBNavbarItem
                      to="#"
                      disabled
                      tabindex="-1"
                      aria-disabled="true"
                    >
                      Disabled
                    </MDBNavbarItem>
                    <!-- Center links -->
                  </MDBNavbarNav>
                </MDBCollapse>
                <!-- Collapsible wrapper -->
              </MDBNavbar>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarBrand,
                MDBNavbarNav,
                MDBNavbarItem,
                MDBCollapse,
                MDBDropdown,
                MDBDropdownToggle,
                MDBDropdownMenu,
                MDBDropdownItem
              } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';
              export default {
                components: {
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBNavbarBrand,
                  MDBNavbarNav,
                  MDBNavbarItem,
                  MDBCollapse,
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem
                },
                setup() {
                  const collapse6 = ref(false);
                  const dropdown9 = ref(false);
                  return {
                    collapse6,
                    dropdown9
                  }
                }
              };
            </script>

Colors

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from light prop for use with light background colors, or dark for dark background colors. Then, customize with bg="*" utilities.

See also our color docs to learn more about colors. 



        
            
          <template>
            <MDBNavbar dark bg="primary">
              <!-- Navbar content -->
            </MDBNavbar>
            <MDBNavbar dark bg="dark">
              <!-- Navbar content -->
            </MDBNavbar>
            <MDBNavbar light style="background-color: #e3f2fd">
              <!-- Navbar content -->
            </MDBNavbar>
          </template>
        
        
    
        
            
          <script>
            import { MDBNavbar } from 'mdb-vue-ui-kit';
            export default {
              components: {
                MDBNavbar,
              },
            };
          </script>

Containers

Although it’s not required, you can wrap a navbar in a MDBContainer to center it on a page or add one within to only center the contents of a fixed or static top navbar. Note that an inner container is still required. To set inner container use container props next to MDBNavbar. You can use it as boolean, without any value (container-fluid will be set), or with any value that MDBContainer would take. 

        
            
          <template>
            <MDBContainer>
              <MDBNavbar expand="lg" light bg="light" container>
                <MDBNavbarBrand href="#">Navbar</MDBNavbarBrand>
              </MDBNavbar>
            </MDBContainer>
          </template>
        
        
    
        
            
          <script>
            import { MDBContainer, MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
            export default {
              components: {
                MDBContainer,
                MDBNavbar,
                MDBNavbarBrand,
              },
            };
          </script>

Use any of the responsive containers to change how wide the content in your navbar.

        
            
          <template>
            <MDBNavbar expand="lg" light bg="light" container="md">
              <MDBNavbarBrand href="#">Navbar</MDBNavbarBrand>
            </MDBNavbar>
          </template>
        
        
    
        
            
          <script>
            import { MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
            export default {
              components: {
                MDBNavbar,
                MDBNavbarBrand,
              },
            };
          </script>

Placement

Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.

Also note that position="sticky" uses position: sticky, which isn’t fully supported in every browser. 

        
            
          <template>
            <MDBNavbar light bg="light" container>
              <MDBNavbarBrand href="#">Default</MDBNavbarBrand>
            </MDBNavbar>
          </template>
        
        
    
        
            
          <script>
            import { MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
            export default {
              components: {
                MDBNavbar,
                MDBNavbarBrand,
              },
            };
          </script>
        
        
    
        
            
          <template>
            <MDBNavbar light bg="light" position="top" container>
              <MDBNavbarBrand href="#">Fixed Top</MDBNavbarBrand>
            </MDBNavbar>
          </template>
        
        
    
        
            
          <script>
            import { MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
            export default {
              components: {
                MDBNavbar,
                MDBNavbarBrand,
              },
            };
          </script>
        
        
    
        
            
          <template>
            <MDBNavbar light bg="light" position="bottom" container>
              <MDBNavbarBrand href="#">Fixed Bottom</MDBNavbarBrand>
            </MDBNavbar>
          </template>
        
        
    
        
            
          <script>
            import { MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
            export default {
              components: {
                MDBNavbar,
                MDBNavbarBrand,
              },
            };
          </script>
        
        
    
        
            
          <template>
            <MDBNavbar light bg="light" position="sticky" container>
              <MDBNavbarBrand href="#">Sticky Top</MDBNavbarBrand>
            </MDBNavbar>
          </template>
        
        
    
        
            
          <script>
            import { MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
            export default {
              components: {
                MDBNavbar,
                MDBNavbarBrand,
              },
            };
          </script>

Responsive behaviors

Navbars with MDBNavbarToggler can utilize collapse, and expand={sm|md|lg|xl|xxl} props to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the expand prop on the MDBNavbar. For navbars that always collapse, don’t add any expand prop.

Toggler

Navbar togglers are left-aligned by default, but should they follow a sibling element like a MDBNavbarBrand, 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 no MDBNavbarBrand shown in lowest breakpoint:

        
            
            <template>
              <MDBNavbar expand="lg" light bg="light" container>
                <MDBNavbarToggler target="#navbarTogglerDemo01"></MDBNavbarToggler>
                <MDBNavbarNav collapse="navbarTogglerDemo01">
                  <MDBNavbarBrand link href="#">Hidden brand</MDBNavbarBrand>
                  <MDBNavbarItem to="#"> Home </MDBNavbarItem>
                  <MDBNavbarItem href="#"> Link </MDBNavbarItem>
                  <MDBNavbarItem to="#" disabled tabindex="-1" aria-disabled="true">
                    Disabled
                  </MDBNavbarItem>
                  <template v-slot:contentRight>
                    <form class="d-flex input-group w-auto">
                      <input
                        type="search"
                        class="form-control"
                        placeholder="Type query"
                        aria-label="Search"
                      />
                      <MDBBtn outline="primary"> Search </MDBBtn>
                    </form>
                  </template>
                </MDBNavbarNav>
              </MDBNavbar>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBBtn,
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarBrand,
                MDBNavbarItem,
              } from 'mdb-vue-ui-kit';
              export default {
                components: {
                  MDBBtn,
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBNavbarBrand,
                  MDBNavbarItem,
                },
              };
            </script>

With a brand name shown on the left and toggler on the right:

        
            
            <template>
              <MDBNavbar expand="lg" light bg="light" container>
                <MDBNavbarBrand link href="#">Navbar</MDBNavbarBrand>
                <MDBNavbarToggler target="#navbarTogglerDemo02"></MDBNavbarToggler>
                <MDBNavbarNav collapse="navbarTogglerDemo02">
                  <MDBNavbarItem to="#"> Home </MDBNavbarItem>
                  <MDBNavbarItem href="#"> Link </MDBNavbarItem>
                  <MDBNavbarItem to="#" disabled tabindex="-1" aria-disabled="true">
                    Disabled
                  </MDBNavbarItem>
                  <template v-slot:contentRight>
                    <form class="d-flex input-group w-auto">
                      <input
                        type="search"
                        class="form-control"
                        placeholder="Type query"
                        aria-label="Search"
                      />
                      <MDBBtn outline="primary"> Search </MDBBtn>
                    </form>
                  </template>
                </MDBNavbarNav>
              </MDBNavbar>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBBtn,
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarBrand,
                MDBNavbarItem,
              } from 'mdb-vue-ui-kit';
              export default {
                components: {
                  MDBBtn,
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBNavbarBrand,
                  MDBNavbarItem,
                },
              };
            </script>

With a toggler on the left and brand name on the right:

        
            
            <template>
              <MDBNavbar expand="lg" light bg="light" container>
                <MDBNavbarToggler target="#navbarTogglerDemo03"></MDBNavbarToggler>
                <MDBNavbarBrand link href="#">Navbar</MDBNavbarBrand>
                <MDBNavbarNav collapse="navbarTogglerDemo03">
                  <MDBNavbarItem to="#"> Home </MDBNavbarItem>
                  <MDBNavbarItem href="#"> Link </MDBNavbarItem>
                  <MDBNavbarItem to="#" disabled tabindex="-1" aria-disabled="true">
                    Disabled
                  </MDBNavbarItem>
                  <template v-slot:contentRight>
                    <form class="d-flex input-group w-auto">
                      <input
                        type="search"
                        class="form-control"
                        placeholder="Type query"
                        aria-label="Search"
                      />
                      <MDBBtn outline="primary"> Search </MDBBtn>
                    </form>
                  </template>
                </MDBNavbarNav>
              </MDBNavbar>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBBtn,
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarBrand,
                MDBNavbarItem,
              } from 'mdb-vue-ui-kit';
              export default {
                components: {
                  MDBBtn,
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBNavbarBrand,
                  MDBNavbarItem,
                },
              };
            </script>

External content

Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the id and data-mdb-target matching, that’s easily done! 

        
            
            <template>
              <div class="collapse" id="navbarToggleExternalContent">
                <div class="bg-dark p-4">
                  <h5 class="text-white h4">Collapsed content</h5>
                  <span class="text-muted">Toggleable via the navbar brand.</span>
                </div>
              </div>
              <MDBNavbar dark bg="dark" container>
                <MDBNavbarToggler target="#navbarToggleExternalContent"> </MDBNavbarToggler>
              </MDBNavbar>
            </template>
          
        
    
        
            
            <script>
              import { MDBBtn, MDBContainer } from 'mdb-vue-ui-kit';
              export default {
                components: {
                  MDBBtn,
                  MDBContainer,
                },
              };
            </script>

Navbar - API

Import

        
            
        <script>
          import {
            MDBNavbar,
            MDBNavbarToggler,
            MDBNavbarBrand,
            MDBNavbarNav,
            MDBNavbarItem
          } from 'mdb-vue-ui-kit';
        </script>

Properties

Navbar

Name Type Default Description Example
tag String 'nav' Defines tag of the MDBNavbar element <MDBNavbar tag="div" />
bg String Sets navbars background color. Use our color palette <MDBNavbar bg="primary" />
dark Boolean false Adjusts font color to contrast with darker navbar color <MDBNavbar dark />
light Boolean false Adjusts font color to contrast with lighter navbar color <MDBNavbar light />
double Boolean false Makes the navbar a great feat with a SideNav <MDBNavbar double />
expand String Determines on which viewport navbar should be expanded. Accepts: sm / small, md / medium, lg / large. If empty - navbar will not collapse. <MDBNavbar expand="md" />
position String Setting the prop makes the navbar fixed. Accpeted values are "top", "bottom" and sticky. <MDBNavbar position="top" />
transparent Boolean false Sets Navbar background to transparent. Combine with prop scrolling and bg props to achieve color changing effect <MDBNavbar transparent />
scrolling Boolean false Changes Navbar's size on scroll. Combine with prop transparent to achieve color changing effect <MDBNavbar scrolling />
scrollingOffset Number 100 Represents the number of pixels scrolled vertically above which the 'scrolling' effect is applied <MDBNavbar scrollingOffset={100} />
center Boolean false Justifies content inside navbar center <MDBNavbar center />
container Boolean | String false Adds a container wrapper inside navbar's content. Adding prop without value will set .container-fluid. Container prop also accepts viewport breakpoint indicators as value <MDBNavbar container /> <MDBNavbar container="md" />
classContainer String Adds class to a container element <MDBNavbar classContainer="justify-content-start" />

Navbar Toggler

Name Type Default Description Example
tag String 'button' Defines tag of the MDBNavbarToggler element <MDBNavbarToggler tag="div" />
target String '#navbarSupportedContent' Sets selector of collapsible element to be toggled by the toggler <MDBNavbarToggler target="#collapsibleElement" />
togglerClass String Add custom classes to the toggler element <MDBNavbarToggler togglesClass="customClass" />
togglerIcon String 'bars' Sets icon name to be used inside toggler. Use our icon names <MDBNavbarToggler togglerIcon="angle-down" />
togglerSize String '1x' Sets size class for toggler icon <MDBNavbarToggler togglerSize="2x" />
iconStyle String 'fas' Sets icon style for toggler <MDBNavbarToggler iconStyle="fab" togglerIcon="mdb" />

Navbar Brand

Name Type Default Description Example
tag String 'div' Defines tag of the MDBNavbarBrand element <MDBNavbarBrand tag="a" />
href String When passed to MDBNavbarBrand component, will make it a link <MDBNavbarBrand href="#" />

Navbar Nav

Name Type Default Description Example
tag String 'ul' Defines tag of the MDBNavbarNav element <MDBNavbarNav tag="div" />
right Boolean false Sets nav elements to the right (adds .ms-auto class) <MDBNavbarNav right />
center Boolean false Set to true to justify content to the center <MDBNavbarNav center />
vertical Boolean false Changes the flex direction to the column <MDBNavbarNav vertical />
justifyAround Boolean false Changes justifictaion to the around <MDBNavbarNav justifyAround />
collapse Boolean | String false Set to true to place content of the nav inside collapsible wrapper. Add string value to the prop to set the id of the wrapper for navbar toggler element <MDBNavbarNav collapse /> <MDBNavbarNav collapse="navID" />

Navbar Item

Name Type Default Description Example
tag String 'li' Defines tag of the MDBNavbarItem element <MDBNavbarItem tag="div" />
active Boolean false Sets MDBNavbarItem state to active. If no to or href props are passed active is assigned directly to nav-item instead of nav-link <MDBNavbarItem active />
disabled Boolean false Sets MDBNavbarItem state to disabled <MDBNavbarItem disabled />
exact Boolean false Active class matching is inclusive. Use the prop to have the component turn into active state only when the to prop matches the $route.path exactly. Available for router propped component only <MDBNavbarItem exact />
vertical Boolean false Changes the flex direction to the column <MDBNavbarItem vertical />
newTab Boolean false Used to have a page opened in a fresh browser's tab. Equivalent to good ol' target="_blank" anchor element attribute <MDBNavbarItem newTab />
href String An outside URL a click should lead to. Will add anchor (nav link) element inside nav item <MDBNavbarItem to="#" />
to String Using this prop instead of href causes the component to render a router-link. Utilize it to navigate inside your SPA project. <MDBNavbarItem to="#" />
linkClass String Adds class to the link (with to or href props) element <MDBNavbarItem linkClass="customClass" />