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>
<script setup lang="ts">
  import {
    MDBBtn,
    MDBNavbar,
    MDBNavbarToggler,
    MDBNavbarBrand,
    MDBNavbarNav,
    MDBNavbarItem,
    MDBCollapse,
    MDBDropdown,
    MDBDropdownToggle,
    MDBDropdownMenu,
    MDBDropdownItem
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const collapse1 = ref(false);
  const dropdown1 = ref(false);
</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, MDBNavbarBrand },
  };
</script>
<script setup lang="ts">
  import { MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import { MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import { MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
</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"
      @click="collapse2 = !collapse2"
    ></MDBNavbarToggler>
    <MDBCollapse id="navbarNav" v-model="collapse2">
      <MDBNavbarNav>
        <MDBNavbarItem to="#" active> Home </MDBNavbarItem>
        <MDBNavbarItem to="#"> Features </MDBNavbarItem>
        <MDBNavbarItem to="#"> Pricing </MDBNavbarItem>
        <MDBNavbarItem to="#" disabled> Disabled </MDBNavbarItem>
      </MDBNavbarNav>
    </MDBCollapse>
  </MDBNavbar>
</template>
<script>
  import {
    MDBNavbar,
    MDBNavbarToggler,
    MDBNavbarBrand,
    DBNavbarNav,
    MDBNavbarItem,
    MDBCollapse,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBNavbar,
      MDBNavbarToggler,
      MDBNavbarBrand,
      MDBNavbarNav,
      MDBNavbarItem,
      MDBCollapse,
    },
    setup() {
      const collapse2 = ref(false);
      return { collapse2 };
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBNavbar,
    MDBNavbarToggler,
    MDBNavbarBrand,
    DBNavbarNav,
    MDBNavbarItem,
    MDBCollapse,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const collapse2 = ref(false);
</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>
<script setup lang="ts">
  import { MDBBtn, MDBNavbar } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import { MDBBtn, MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import { MDBBtn, MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import { MDBBtn, MDBNavbar } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import { MDBNavbar } from 'mdb-vue-ui-kit';
</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"
      @click="collapse3 = !collapse3"
    ></MDBNavbarToggler>
    <MDBCollapse id="navbarText" v-model="collapse3">
      <MDBNavbarNav>
        <MDBNavbarItem href="#"> Home </MDBNavbarItem>
        <MDBNavbarItem href="#"> Features </MDBNavbarItem>
        <MDBNavbarItem href="#"> Pricing </MDBNavbarItem>
      </MDBNavbarNav>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </MDBCollapse>
  </MDBNavbar>
</template>
<script>
  import {
    MDBNavbar,
    MDBNavbarBrand,
    MDBNavbarToggler,
    MDBNavbarNav,
    MDBNavbarItem,
    MDBCollapse,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBNavbar,
      MDBNavbarBrand,
      MDBNavbarToggler,
      MDBNavbarNav,
      MDBNavbarItem,
      MDBCollapse,
    },
    setup() {
      const collapse3 = ref(false);
      return { collapse3 };
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBNavbar,
    MDBNavbarBrand,
    MDBNavbarToggler,
    MDBNavbarNav,
    MDBNavbarItem,
    MDBCollapse,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const collapse3 = ref(false);
</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>
<script setup lang="ts">
  import {
    MDBNavbar,
    MDBNavbarToggler,
    MDBNavbarBrand,
    MDBNavbarNav,
    MDBNavbarItem,
    MDBCollapse,
    MDBDropdown,
    MDBDropdownToggle,
    MDBDropdownMenu,
    MDBDropdownItem,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const dropdown2 = ref(false);
</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>
<script setup lang="ts">
  import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
import {
    MDBIcon,
    MDBNavbar,
    MDBNavbarToggler,
    MDBNavbarBrand,
    MDBNavbarNav,
    MDBNavbarItem,
    MDBDropdown,
    MDBDropdownToggle,
    MDBDropdownMenu,
    MDBDropdownItem
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const dropdown3 = ref(false);
</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>
<script setup lang="ts">
  import {
    MDBNavbar,
    MDBNavbarNav,
    MDBNavbarItem,
    MDBIcon
  } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import {
    MDBIcon,
    MDBBadge,
    MDBNavbar,
    MDBNavbarToggler,
    MDBNavbarBrand,
    MDBNavbarNav,
    MDBNavbarItem,
    MDBDropdown,
    MDBDropdownToggle,
    MDBDropdownMenu,
    MDBDropdownItem,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const dropdown4 = ref(false);
</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>
<script setup lang="ts">
  import {
    MDBNavbar,
    MDBNavbarNav,
    MDBNavbarItem,
    MDBDropdown,
    MDBDropdownToggle,
    MDBDropdownMenu,
    MDBDropdownItem,
    MDBIcon,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const dropdown5 = ref(false);
</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>
<script setup lang="ts">
  import {
    MDBNavbar,
    MDBNavbarNav,
    MDBNavbarItem,
    MDBDropdown,
    MDBDropdownToggle,
    MDBDropdownMenu,
    MDBDropdownItem,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const dropdown6 = ref(false);
</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>
<script setup lang="ts">
  import {
    MDBNavbar,
    MDBNavbarToggler,
    MDBNavbarBrand,
    MDBNavbarNav,
    MDBNavbarItem,
    MDBCollapse,
    MDBDropdown,
    MDBDropdownToggle,
    MDBDropdownMenu,
    MDBDropdownItem
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const collapse4 = ref(false);
  const dropdown7 = ref(false);
</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>
<script setup lang="ts">
  import {
    MDBNavbar,
    MDBNavbarToggler,
    MDBNavbarBrand,
    MDBNavbarNav,
    MDBNavbarItem,
    MDBCollapse,
    MDBDropdown,
    MDBDropdownToggle,
    MDBDropdownMenu,
    MDBDropdownItem
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const collapse5 = ref(false);
  const dropdown8 = ref(false);
</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>
<script setup lang="ts">
  import {
    MDBNavbar,
    MDBNavbarToggler,
    MDBNavbarBrand,
    MDBNavbarNav,
    MDBNavbarItem,
    MDBCollapse,
    MDBDropdown,
    MDBDropdownToggle,
    MDBDropdownMenu,
    MDBDropdownItem
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const collapse6 = ref(false);
  const dropdown9 = ref(false);
</script>

Colors

Sample 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>
<script setup lang="ts">
  import { MDBNavbar } from 'mdb-vue-ui-kit';
</script>

Secondary icons

The secondary icons on a white background give a light, soft look. They are also helpful in keeping the navbar and sidenav appear consistent as they are the same color as the icons in sidenav. 

<template>
  <MDBNavbar
  container
  expand="lg"
  bg="light"
  class="d-flex justify-content-between"
  >
    <MDBNavbarBrand>
      <MDBIcon icon="mdb" iconStyle="fab" size="2x" />
    </MDBNavbarBrand>
    <MDBNavbarToggler
      target="#navbarColor01"
      @click="collapse7 = !collapse7"
    ></MDBNavbarToggler>
    <MDBCollapse id="navbarColor01" v-model="collapse7">
      <MDBNavbarNav class="mb-2 mb-lg-0">
        <MDBNavbarItem href="#" linkClass="link-secondary"
          >Dashboard</MDBNavbarItem
        >
        <MDBNavbarItem href="#" linkClass="link-secondary"
          >Team</MDBNavbarItem
        >
        <MDBNavbarItem href="#" linkClass="link-secondary"
          >Projects</MDBNavbarItem
        >
      </MDBNavbarNav>
    </MDBCollapse>

    <MDBNavbarNav class="mb-2 mb-lg-0 d-flex flex-row">
      <MDBNavbarItem
        to="#"
        class="me-3 me-lg-0"
        linkClass="link-secondary"
        ><MDBIcon icon="shopping-cart"></MDBIcon
      ></MDBNavbarItem>
      <MDBNavbarItem
        to="#"
        class="me-3 me-lg-0"
        linkClass="link-secondary"
      >
        <MDBIcon icon="bell" />
        <MDBBadge notification color="danger" pill>1</MDBBadge>
      </MDBNavbarItem>
      <MDBNavbarItem href="#" class="me-3 me-lg-0">
        <img
          src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"
          class="rounded-circle"
          height="22"
          alt=""
          loading="lazy"
        />
      </MDBNavbarItem>
    </MDBNavbarNav>
  </MDBNavbar>
</template>
<script>
  import {
    MDBNavbar,
    MDBNavbarItem,
    MDBNavbarBrand,
    MDBNavbarNav,
    MDBNavbarToggler,
    MDBBadge,
    MDBIcon,
    MDBCollapse
  } from 'mdb-vue-ui-kit';
  import { ref } from "vue";

  export default {
    components: {
      MDBNavbar,
      MDBNavbarItem,
      MDBNavbarBrand,
      MDBNavbarNav,
      MDBNavbarToggler,
      MDBBadge,
      MDBIcon,
      MDBCollapse
    },
    setup() {
      const collapse7 = ref(false);

      return {
        collapse7,
      }
    }
  };
</script>
<script setup lang="ts">
  import {
    MDBNavbar,
    MDBNavbarItem,
    MDBNavbarBrand,
    MDBNavbarNav,
    MDBNavbarToggler,
    MDBBadge,
    MDBIcon,
    MDBCollapse
  } from 'mdb-vue-ui-kit';
  import { ref } from "vue";

  const collapse7 = ref(false);
</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 setup lang="ts">
  import { MDBContainer, MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';

  export default {
    components: {
      MDBContainer,
      MDBNavbar,
      MDBNavbarBrand,
    },
  };
</script>
<script>
  import { MDBContainer, MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import { MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import { MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import { MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import { MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
  import { MDBNavbar, MDBNavbarBrand } from 'mdb-vue-ui-kit';
</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"
      @click="collapse10 = !collapse10"
    ></MDBNavbarToggler>
    <MDBCollapse id="navbarTogglerDemo01" v-model="collapse10">
      <MDBNavbarNav>
        <MDBNavbarBrand link href="#">Hidden brand</MDBNavbarBrand>
        <MDBNavbarItem to="#"> Home </MDBNavbarItem>
        <MDBNavbarItem href="#"> Link </MDBNavbarItem>
        <MDBNavbarItem
          link
          to="#"
          disabled
          tabindex="-1"
          aria-disabled="true"
        >
          Disabled
        </MDBNavbarItem>
      </MDBNavbarNav>
      <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,
    MDBNavbarItem,
    MDBCollapse,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBBtn,
      MDBNavbar,
      MDBNavbarToggler,
      MDBNavbarBrand,
      MDBNavbarItem,
      MDBCollapse,
    },
    setup() {
      const collapse10 = ref(false);
      return { collapse10 };
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBBtn,
    MDBNavbar,
    MDBNavbarToggler,
    MDBNavbarBrand,
    MDBNavbarItem,
    MDBCollapse,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const collapse10 = ref(false);
</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"
      @click="collapse11 = !collapse11"
    ></MDBNavbarToggler>
    <MDBCollapse id="navbarTogglerDemo02" v-model="collapse11">
      <MDBNavbarNav>
        <MDBNavbarItem to="#"> Home </MDBNavbarItem>
        <MDBNavbarItem href="#"> Link </MDBNavbarItem>
        <MDBNavbarItem
          link
          to="#"
          disabled
          tabindex="-1"
          aria-disabled="true"
        >
          Disabled
        </MDBNavbarItem>
      </MDBNavbarNav>
      <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,
    MDBNavbarItem,
    MDBCollapse,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBBtn,
      MDBNavbar,
      MDBNavbarToggler,
      MDBNavbarBrand,
      MDBNavbarItem,
      MDBCollapse,
    },
    setup() {
      const collapse11 = ref(false);
      return { collapse11 };
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBBtn,
    MDBNavbar,
    MDBNavbarToggler,
    MDBNavbarBrand,
    MDBNavbarItem,
    MDBCollapse,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const collapse11 = ref(false);
</script>

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

<template>
  <MDBNavbar expand="lg" light bg="light" container>
    <MDBNavbarToggler
      target="#navbarTogglerDemo03"
      @click="collapse12 = !collapse12"
    ></MDBNavbarToggler>
    <MDBNavbarBrand link href="#">Navbar</MDBNavbarBrand>
    <MDBCollapse id="navbarTogglerDemo03" v-model="collapse12">
      <MDBNavbarNav>
        <MDBNavbarItem to="#"> Home </MDBNavbarItem>
        <MDBNavbarItem href="#"> Link </MDBNavbarItem>
        <MDBNavbarItem
          link
          to="#"
          disabled
          tabindex="-1"
          aria-disabled="true"
        >
          Disabled
        </MDBNavbarItem>
      </MDBNavbarNav>
      <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,
    MDBNavbarItem,
    MDBCollapse,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBBtn,
      MDBNavbar,
      MDBNavbarToggler,
      MDBNavbarBrand,
      MDBNavbarItem,
      MDBCollapse,
    },
    setup() {
      const collapse12 = ref(false);
      return { collapse12 };
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBBtn,
    MDBNavbar,
    MDBNavbarToggler,
    MDBNavbarBrand,
    MDBNavbarItem,
    MDBCollapse,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const collapse12 = ref(false);
</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>
  <MDBCollapse id="navbarToggleExternalContent" v-model="collapse13">
    <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>
  </MDBCollapse>
  <MDBNavbar dark bg="dark" container>
    <MDBNavbarToggler
      target="#navbarToggleExternalContent"
      @click="collapse13 = !collapse13"
    >
    </MDBNavbarToggler>
  </MDBNavbar>
</template>
<script>
  import { MDBNavbar, MDBNavbarToggler, MDBCollapse } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBNavbar,
      MDBNavbarToggler,
      MDBCollapse,
    },
    setup() {
      const collapse13 = ref(false);
      return { collapse13 };
    },
  };
</script>
<script setup lang="ts">
  import { MDBNavbar, MDBNavbarToggler, MDBCollapse} from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const collapse13 = ref(false);
</script>

Advanced examples

Advanced examples of navbars usage.

Facebook style

A typical example of Facebook navbar usage - 3 columns with icons and distinctive notifications plus a search field on the left. 

<template>
  <MDBNavbar expand="lg" light bg="light" container>
    <MDBNavbarNav class="mb-2 mb-lg-0">
      <MDBNavbarBrand href="#"
        ><MDBIcon icon="mdb" iconStyle="fab" size="2x"></MDBIcon
      ></MDBNavbarBrand>
      <MDBNavbarToggler
        target="#navbarSupportedContent"
        @click="collapse14 = !collapse14"
      ></MDBNavbarToggler>
      <MDBCollapse id="navbarSupportedContent" v-model="collapse14">
        <!-- Search form -->
        <form class="d-flex input-group w-auto align-items-center">
          <MDBInput
            type="search"
            class="form-control"
            placeholder="Search"
            aria-label="Search"
          />
          <MDBIcon icon="search" class="mx-3"></MDBIcon>
        </form>
        <!-- Search form -->
      </MDBCollapse>
    </MDBNavbarNav>

    <MDBNavbarNav class="mb-2 mb-lg-0">
      <MDBNavbarItem href="#">
        <MDBIcon icon="home"></MDBIcon>
        <MDBBadge pill notification badge="danger">1</MDBBadge>
      </MDBNavbarItem>
      <MDBNavbarItem to="#">
        <MDBIcon icon="flag"></MDBIcon>
      </MDBNavbarItem>
      <MDBNavbarItem to="#">
        <MDBIcon icon="video"></MDBIcon>
      </MDBNavbarItem>
      <MDBNavbarItem to="#">
        <MDBIcon icon="shopping-bag"></MDBIcon>
      </MDBNavbarItem>
      <MDBNavbarItem to="#">
        <MDBIcon icon="users"></MDBIcon>
        <MDBBadge pill notification badge="danger">2</MDBBadge>
      </MDBNavbarItem>
    </MDBNavbarNav>

    <MDBNavbarNav class="mb-2 mb-lg-0">
      <MDBNavbarItem class="d-sm-flex align-items-sm-center">
        <img
          src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"
          class="rounded-circle"
          height="22"
          alt=""
          loading="lazy"
        />
        <strong class="d-none d-sm-block ms-1">John</strong>
      </MDBNavbarItem>
      <MDBNavbarItem to="#">
        <MDBIcon icon="plus-circle"></MDBIcon>
      </MDBNavbarItem>
      <MDBNavbarItem to="#">
        <MDBIcon icon="comments"></MDBIcon>
        <MDBBadge pill notification badge="danger">6</MDBBadge>
      </MDBNavbarItem>
      <MDBNavbarItem to="#">
        <MDBIcon icon="bell"></MDBIcon>
        <MDBBadge pill notification badge="danger">12</MDBBadge>
      </MDBNavbarItem>
      <MDBNavbarItem>
        <!-- Navbar dropdown -->
        <MDBDropdown v-model="dropdown10" class="nav-item">
          <MDBDropdownToggle
            tag="a"
            class="nav-link"
            @click="dropdown10 = !dropdown10"
            ><MDBIcon icon="chevron-circle-down"></MDBIcon
          ></MDBDropdownToggle>
          <MDBDropdownMenu aria-labelledby="dropdownMenuButton">
            <MDBDropdownItem href="#">Action</MDBDropdownItem>
            <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
            <MDBDropdownItem href="#"
              >Something else here</MDBDropdownItem
            >
          </MDBDropdownMenu>
        </MDBDropdown>
      </MDBNavbarItem>
    </MDBNavbarNav>
  </MDBNavbar>
</template>
<script>
  import {
    MDBNavbar,
    MDBNavbarToggler,
    MDBNavbarBrand,
    MDBNavbarItem,
    MDBNavbarNav,
    MDBDropdown,
    MDBDropdownItem,
    MDBDropdownMenu,
    MDBDropdownToggle,
    MDBIcon,
    MDBBadge,
    MDBInput,
    MDBCollapse,
  } from 'mdb-vue-ui-kit';
  import { ref } from "vue";

  export default {
    components: {
      MDBNavbar,
      MDBNavbarToggler,
      MDBNavbarBrand,
      MDBNavbarItem,
      MDBNavbarNav,
      MDBDropdown,
      MDBDropdownItem,
      MDBDropdownMenu,
      MDBDropdownToggle,
      MDBIcon,
      MDBBadge,
      MDBInput,
      MDBCollapse,
    },
    setup() {
      const collapse14 = ref(false);
      const dropdown10 = ref(false);

      return {
        collapse14,
        dropdown10
      }
    }
  };
</script>
<script setup lang="ts">
  import {
    MDBNavbar,
    MDBNavbarToggler,
    MDBNavbarBrand,
    MDBNavbarItem,
    MDBNavbarNav,
    MDBDropdown,
    MDBDropdownItem,
    MDBDropdownMenu,
    MDBDropdownToggle,
    MDBIcon,
    MDBBadge,
    MDBInput,
    MDBCollapse,
  } from 'mdb-vue-ui-kit';
  import { ref } from "vue";

  const collapse14 = ref(false);
  const dropdown10 = ref(false);
</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 />

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

CSS variables

As part of MDB’s evolving CSS variables approach, navbar now uses local CSS variables on .navbar for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. 

// Variables for navbar free
// .navbar
--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
--#{$prefix}navbar-color: #{$navbar-light-color};
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-light-active-color};
--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
--#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

--#{$prefix}navbar-box-shadow: #{$navbar-box-shadow};
--#{$prefix}navbar-padding-top: #{$navbar-padding-top};
--#{$prefix}navbar-brand-img-margin-right: #{$navbar-brand-img-margin-right};

// .navbar-nav
--#{$prefix}nav-link-padding-x: 0;
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
--#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

// .navbar-dark
--#{$prefix}navbar-color: #{$navbar-dark-color};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

// Variables for navbar pro
// .navbar
--#{$prefix}navbar-scroll-transition: #{$navbar-scroll-transition};
--#{$prefix}navbar-scroll-scrolled-padding-y: #{$navbar-scroll-scrolled-padding-y};
--#{$prefix}navbar-scroll-scrolled-color: #{$navbar-scroll-scrolled-color};
--#{$prefix}navbar-scroll-color: #{$navbar-scroll-color};
--#{$prefix}navbar-scrolled-bg: #{$navbar-scrolled-bg};

SCSS variables

$navbar-padding-y: $spacer * 0.5;
$navbar-padding-x: null;

$navbar-nav-link-padding-x: 0.5rem;

$navbar-brand-font-size: $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * 0.5;
$navbar-brand-margin-end: 1rem;

$navbar-toggler-padding-y: 0.25rem;
$navbar-toggler-padding-x: 0.75rem;
$navbar-toggler-font-size: $font-size-lg;
$navbar-toggler-border-radius: $btn-border-radius;
$navbar-toggler-focus-width: $btn-focus-width;
$navbar-toggler-transition: box-shadow 0.15s ease-in-out;

$navbar-light-color: rgba($black, 0.55);
$navbar-light-hover-color: rgba($black, 0.7);
$navbar-light-active-color: rgba($black, 0.9);
$navbar-light-disabled-color: rgba($black, 0.3);
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, 0.1);
$navbar-light-brand-color: $navbar-light-active-color;
$navbar-light-brand-hover-color: $navbar-light-active-color;

$navbar-dark-color: rgba($white, 0.55);
$navbar-dark-hover-color: rgba($white, 0.75);
$navbar-dark-active-color: $white;
$navbar-dark-disabled-color: rgba($white, 0.25);
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color: rgba($white, 0.1);
$navbar-dark-brand-color: $navbar-dark-active-color;
$navbar-dark-brand-hover-color: $navbar-dark-active-color;

$navbar-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
$navbar-padding-top: 0.5625rem;
$navbar-brand-img-margin-right: 0.25rem;

// Variables for navbar pro
$navbar-scroll-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
$navbar-scroll-scrolled-padding-y: 5px;
$navbar-scroll-scrolled-color: #4f4f4f;
$navbar-scroll-color: #fff;
$navbar-scrolled-bg: #fff;