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
MDBNavbarwithexpand{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 arole="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 oraria-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:
MDBNavbarBrandfor your company, product, or project name.MDBNavbarNavfor a full-height and lightweight navigation.-
MDBNavbarTogglerfor use with our collapse plugin and other navigation toggling behaviors. - Flex and spacing utilities for any form controls and actions.
.navbar-textfor adding vertically centered strings of text.-
Use
collapseprop insideMDBNavbarNavfor 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>
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>
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>
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
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;