Vue Bootstrap Dropdowns
Vue Dropdowns - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
Vue Bootstrap dropdown is a toggleable menu embedding additional links or content. It allows you to construct advanced navigation and link categorization.
In case of more complicated navigations systems dropdowns are the essential elements providing you with possibility of placing all the most relevant links in our navigation bar (or other component acting as navigation - such as SideNav)
Aside from being not only highly functional, MDB dropdowns are also extraordinary visually attractive. It gives them this characteristic Material Design effects, like shadows, living colors or charming waves effect after opening a link.
They’re toggled by clicking, not by hovering; this is an intentional design decision. Why?
MDB is "mobile first" framework so, we avoid mixing functional elements and interaction by hovering because it decreases User Experience of users of mobile devices.
Google Material Design guidelines recommend the same approach.
Basic example
<template>
<mdb-dropdown>
<mdb-dropdown-toggle slot="toggle">Basic dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
<div class="dropdown-divider"></div>
<mdb-dropdown-item>Separated link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</template>
<script>
import { mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle } from 'mdbvue';
export default {
name: 'DropdownPage',
components: {
mdbDropdown,
mdbDropdownItem,
mdbDropdownMenu,
mdbDropdownToggle
}
}
</script>
Material dropdowns MDB Pro component
<template>
<mdb-dropdown>
<mdb-dropdown-toggle color="primary" slot="toggle">Material dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu color="primary">
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
<div class="dropdown-divider"></div>
<mdb-dropdown-item>Separated link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</template>
<script>
import { mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle } from 'mdbvue';
export default {
name: 'DropdownPage',
components: {
mdbDropdown,
mdbDropdownItem,
mdbDropdownMenu,
mdbDropdownToggle
}
}
</script>
To change a color of the dropdown use one of the following props.
-
primary
-
default
-
secondary
-
success
-
elegant
-
danger
-
info
-
warning
-
ins
Sizing
Button dropdowns work with buttons of all sizes
<template>
<div>
<mdb-dropdown>
<mdb-dropdown-toggle slot="toggle" color="danger" size="lg">Large button</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
<div class="dropdown-divider"></div>
<mdb-dropdown-item>Separated link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
<mdb-dropdown>
<mdb-dropdown-toggle slot="toggle" color="danger" size="sm">Small button</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
<div class="dropdown-divider"></div>
<mdb-dropdown-item>Separated link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</div>
</template>
<script>
import { mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle } from 'mdbvue';
export default {
name: 'DropdownPage',
components: {
mdbDropdown,
mdbDropdownItem,
mdbDropdownMenu,
mdbDropdownToggle
}
}
</script>
Dropup variation
Trigger dropdown menus above elements by adding dropup
prop to the parent.
<template>
<mdb-dropdown dropup>
<mdb-dropdown-toggle slot="toggle" color="primary">Dropup</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
<div class="dropdown-divider"></div>
<mdb-dropdown-item>Separated link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</template>
<script>
import { mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle } from 'mdbvue';
export default {
name: 'DropdownPage',
components: {
mdbDropdown,
mdbDropdownItem,
mdbDropdownMenu,
mdbDropdownToggle
}
}
</script>
Alignment
By default, a dropdown menu is automatically positioned 100% from the top and along the left
side of its parent.
Add right
prop to a mdb-dropdown-menu
component to right align the dropdown menu.
<template>
<mdb-dropdown end>
<mdb-dropdown-toggle slot="toggle" color="primary">This dropdown's menu is right-aligned</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
<div class="dropdown-divider"></div>
<mdb-dropdown-item>Separated link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</template>
<script>
import { mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle } from 'mdbvue';
export default {
name: 'DropdownPage',
components: {
mdbDropdown,
mdbDropdownItem,
mdbDropdownMenu,
mdbDropdownToggle
}
}
</script>
Disabled menu items
Add .disabled
to items in the dropdown to style them as disabled.
<template>
<mdb-dropdown>
<mdb-dropdown-toggle slot="toggle" color="primary">Dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Regular link</mdb-dropdown-item>
<mdb-dropdown-item class="disabled">Disabled link</mdb-dropdown-item>
<mdb-dropdown-item>Another link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</template>
<script>
import { mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle } from 'mdbvue';
export default {
name: 'DropdownPage',
components: {
mdbDropdown,
mdbDropdownItem,
mdbDropdownMenu,
mdbDropdownToggle
}
}
</script>
Active menu items
Add active
to items in the dropdown to style them as active.
<template>
<mdb-dropdown>
<mdb-dropdown-toggle slot="toggle" color="primary">Dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item active>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
<div class="dropdown-divider"></div>
<mdb-dropdown-item>Separated link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</template>
<script>
import { mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle } from 'mdbvue';
export default {
name: 'DropdownPage',
components: {
mdbDropdown,
mdbDropdownItem,
mdbDropdownMenu,
mdbDropdownToggle
}
}
</script>
Dropright variation
Trigger dropdown menus at the right of the elements by adding dropright
to the
parent element.
<template>
<div>
<mdb-btn color="primary" class="m-0">Dropright</mdb-btn>
<mdb-dropdown btn-group split dropright>
<mdb-dropdown-toggle slot="toggle" color="primary" class="px-3"></mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
<div class="dropdown-divider"></div>
<mdb-dropdown-item>Separated link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</div>
</template>
<script>
import { mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle, mdbBtn } from 'mdbvue';
export default {
name: 'DropdownPage',
components: {
mdbDropdown,
mdbDropdownItem,
mdbDropdownMenu,
mdbDropdownToggle,
mdbBtn
}
}
</script>
Dropleft variation
Trigger dropdown menus at the right of the elements by adding dropleft
to the
parent element.
<template>
<div>
<mdb-dropdown btn-group dropleft style="margin-left: 200px">
<mdb-dropdown-toggle slot="toggle" color="primary" class="px-3"></mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
<div class="dropdown-divider"></div>
<mdb-dropdown-item>Separated link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
<mdb-btn color="primary" style="margin-left: -5px">Dropleft</mdb-btn>
</div>
</template>
<script>
import { mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle, mdbBtn } from 'mdbvue';
export default {
name: 'DropdownPage',
components: {
mdbDropdown,
mdbDropdownItem,
mdbDropdownMenu,
mdbDropdownToggle,
mdbBtn
}
}
</script>
Dropdowns - API
In this section you will find advanced information about the Dropdowns component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Import statement
import { mdbDropdown, mdbDropdownToggle, mdbDropdownMenu, mdbDropdownItem } from 'mdbvue';
Dropdown
API Reference: Properties
Dropdown Item
API Reference: Properties
Name | Type | Default | Description | Example |
---|---|---|---|---|
tag |
String | 'a' |
Changes dropdown item's wrapper tag | <mdb-dropdown-item tag="p" /> |
to |
String, Object |
|
Changes the component's tag to router-link |
<mdb-dropdown-item to="/" /> |
href |
String |
|
The href attribute's value of the anchor tag | <mdb-dropdown-item href="/" /> |
disabled |
Boolean | false |
Disables the item | <mdb-dropdown-item disabled /> |
active |
Boolean | false |
Adds active class to the item | <mdb-dropdown-item active /> |
exact |
Boolean | false |
Sets exact attribute of the component | <mdb-dropdown-item exact /> |
newTab |
Boolean | false |
Sets component's target to "_blank" | <mdb-dropdown-item newTab /> |
submenu |
Boolean | false |
Adds 'dropdown-submenu' class to the component (for multilevel dropdowns) | <mdb-dropdown-item submenu /> |
submenuIcon |
String |
|
Adds an icon to the submenu item | <mdb-dropdown-item submenu submenuIcon="chevron-right" /> |
Dropdown Toggle
API Reference: Properties
Name | Type | Default | Description | Example |
---|---|---|---|---|
navLink |
Boolean | false |
Changes the wrapper's class from 'btn' to 'nav-link' | <mdb-dropdown-toggle tag="p" /> |
srOnly |
Boolean | false |
Adds source-only text "Toggle Dropdown" | <mdb-dropdown-toggle srOnly /> |
mdbBtn's props |
multiple |
|
You can style mdbDropdownToggle with mdbBtn props | <mdb-dropdown-toggle outline="danger" /> |