Vue Bootstrap Dropdowns

Vue Dropdowns - Bootstrap 4 & Material Design

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.


        <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
script


          <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
script


        <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
script


        <template>
          <mdb-dropdown dropup>
            <mdb-dropdown-toggle slot="toggle" color="primary">Dropup</mdb-dropdown-toggle>
            <mdb-dropdown-menu dropup>
              <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
script


        <template>
          <mdb-dropdown>
            <mdb-dropdown-toggle slot="toggle" color="primary">This dropdown's menu is right-aligned</mdb-dropdown-toggle>
            <mdb-dropdown-menu right>
              <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>

Menu headers

Add a header to label sections of actions in any dropdown menu.

template
script


        <template>
          <mdb-dropdown>
            <mdb-dropdown-toggle slot="toggle" color="primary">Dropdown</mdb-dropdown-toggle>
            <mdb-dropdown-menu>
              <h6 class="dropdown-header">Dropdown header</h6>
              <mdb-dropdown-item>Action</mdb-dropdown-item>
              <mdb-dropdown-item>Another action</mdb-dropdown-item>
              <mdb-dropdown-item>Something else here</mdb-dropdown-item>
              <mdb-dropdown-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>

Menu dividers

Separate groups of related menu items with a divider.

template
script


        <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>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
script


        <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
script


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

Multi-level dropdown

- Click Me!
  - Hey
  - Hi
  - Hello
- Click Me Too!
  - How
  - are
  - Click Me Too!
    - How
    - are

template
script


        <template>
          <mdb-dropdown multiLevel>
            <mdb-dropdown-toggle slot="toggle" color="mdb-color">Click me</mdb-dropdown-toggle>
            <mdb-dropdown-menu>
              <mdb-dropdown-item tag="div" class="p-0" submenu>
                <mdb-dropdown class="w-100">
                  <mdb-dropdown-item slot="toggle" submenuIcon="caret-right">Click me</mdb-dropdown-item>
                  <mdb-dropdown-menu class="ml-2 rounded-0 border-0 z-depth-1">
                    <mdb-dropdown-item href="#">Item 1</mdb-dropdown-item>
                    <mdb-dropdown-item href="#">Item 2</mdb-dropdown-item>
                    <mdb-dropdown-item href="#">Item 3</mdb-dropdown-item>
                  </mdb-dropdown-menu>
                </mdb-dropdown>
              </mdb-dropdown-item>
              <mdb-dropdown-item class="p-0" submenu>
                <mdb-dropdown class="w-100">
                  <mdb-dropdown-item slot="toggle" submenuIcon="caret-right">Click me</mdb-dropdown-item>
                  <mdb-dropdown-menu class="ml-2 rounded-0 border-0 z-depth-1">
                    <mdb-dropdown-item href="#">Item 1</mdb-dropdown-item>
                    <mdb-dropdown-item href="#">Item 2</mdb-dropdown-item>
                    <mdb-dropdown-item href="#">Item 3</mdb-dropdown-item>
                  </mdb-dropdown-menu>
                </mdb-dropdown>
              </mdb-dropdown-item>
            </mdb-dropdown-menu>
          </mdb-dropdown>
        </template>


        <script>
          import {
            mdbDropdown,
            mdbDropdownToggle,
            mdbDropdownMenu,
            mdbDropdownItem,
          } from "mdbvue";

          export default {
            name: "DropdownPage",
            components: {
              mdbDropdown,
              mdbDropdownToggle,
              mdbDropdownMenu,
              mdbDropdownItem,
            }
          };
        </script>

Dropright variation

Trigger dropdown menus at the right of the elements by adding dropright to the parent element.

template
script


        <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 dropright>
                <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
script


          <template>
            <div>
              <mdb-dropdown btn-group dropleft style="padding-left: 200px">
                <mdb-dropdown-toggle slot="toggle" color="primary" class="px-3"></mdb-dropdown-toggle>
                <mdb-dropdown-menu dropleft>
                  <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>

Menu forms

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.

template
script


          <template>
            <mdb-dropdown style="min-width: 400px" multiLevel>
              <mdb-dropdown-toggle slot="toggle" color="secondary">Dropdown link</mdb-dropdown-toggle>
              <mdb-dropdown-menu >
                <form class="px-2 py-2">
                  <div class="form-group">
                    <label for="exampleDropdownFormEmail1">Email address</label>
                    <input
                      type="email"
                      class="form-control"
                      id="exampleDropdownFormEmail1"
                      placeholder="email@example.com"
                      @click.stop
                    />
                  </div>
                  <div class="form-group">
                    <label for="exampleDropdownFormPassword1">Password</label>
                    <input
                      type="password"
                      class="form-control"
                      id="exampleDropdownFormPassword1"
                      placeholder="Password"
                      @click.stop
                    />
                  </div>
                  <div class="custom-control custom-checkbox" @click.stop>
                    <input type="checkbox" class="custom-control-input" id="12" @change="$emit('click', $event)">
                    <label class="custom-control-label" for="12">Remember me</label>
                </div>
                  <mdb-btn type="submit" color="primary">Sign in</mdb-btn>
                </form>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">New around here? Sign up</a>
                <a class="dropdown-item" href="#">Forgot password?</a>
              </mdb-dropdown-menu>
            </mdb-dropdown>
          </template>


          <script>
            import { mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle, mdbInput, mdbBtn } from 'mdbvue';
            export default {
              name: 'DropdownPage',
              components: {
                mdbDropdown,
                mdbDropdownItem,
                mdbDropdownMenu,
                mdbDropdownToggle,
                mdbInput,
                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';

API Reference: Properties

- property available only for PRO users.

Name	Type	Default	Description	Example
`tag`	String	`'div'`	Changes dropdown's wrapper tag	`<mdb-dropdown tag="p" />`
`dropup`	Boolean	`false`	Trigger dropdown menus above elements	`<mdb-dropdown dropup />`
`dropright`	Boolean	`false`	Trigger dropdown menus at the right of the elements	`<mdb-dropdown dropright />`
`dropleft`	Boolean	`false`	Trigger dropdown menus at the left of the elements	`<mdb-dropdown dropleft />`
`megaMenu`	Boolean	`false`	Make dropdown act like a mega menu	`<mdb-dropdown megaMenu />`
`multiLevel`	Boolean	`false`	Indicate multi level dropdown	`<mdb-dropdown multi-level />`
`hover`	Boolean	`false`	Trigger dropdown on hover	`<mdb-dropdown hover >`

Import statement
Properties