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

Action Another action Something else here
Separated link 
        
            
        <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

Action Another action Something else here Something else here
Action Another action Something else here Something else here
Action Another action Something else here Something else here
Action Another action Something else here Something else here
Action Another action Something else here Something else here
Action Another action Something else here Something else here
Action Another action Something else here Something else here
Action Another action Something else here Something else here
Action Another action Something else here Something else here 
        
            
          <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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
        
            
        <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.

Action Another action Something else here
Separated link 
        
            
        <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.

Action Another action Something else here 
        
            
        <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.

Regular link Disabled link Another link 
        
            
        <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.

Regular link Active link Another link 
        
            
          <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.

Action Another action Something else here
Separated link 
        
            
        <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.

Action Another action Something else here
Separated link 
        
            
          <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>

Vue Dropdowns - API

In this section you will find advanced information about the Dropdown 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

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

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 >
split Boolean false Adds additional left margin <mdb-dropdown split />
updatePosition Boolean true Adjusts position of the dropdown on scroll/resize <mdb-dropdown :updatePosition="false" />
btnGroup Boolean false Changes alignment of the toggler to fit within a button group <mdb-dropdown btn-group />

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