Sign in


Sign up


Bootstrap dropdown

The dropdown is simply a drop-down menu embedding additional links or content. It allows you to construct much more 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

                        
<dropdown>
  <dropdown-toggle>Basic dropdown</dropdown-toggle>
  <dropdown-menu>
    <dropdown-item>Action</dropdown-item>
    <dropdown-item>Another action</dropdown-item>
    <dropdown-item>Something else here</dropdown-item>
    <div class="dropdown-divider"></div>
    <dropdown-item>Separated link</dropdown-item>
  </dropdown-menu>
</dropdown>
      

Sizing

Button dropdowns work with buttons of all sizes

                        
<dropdown btn-group>
  <dropdown-toggle size="lg">Large button</dropdown-toggle>
  <dropdown-menu>
    <dropdown-item>Action</dropdown-item>
    <dropdown-item>Another action</dropdown-item>
    <dropdown-item>Something else here</dropdown-item>
    <div class="dropdown-divider"></div>
    <dropdown-item>Separated link</dropdown-item>
  </dropdown-menu>
</dropdown>
<dropdown btn-group>
  <dropdown-toggle size="sm">Small button</dropdown-toggle>
  <dropdown-menu>
    <dropdown-item>Action</dropdown-item>
    <dropdown-item>Another action</dropdown-item>
    <dropdown-item>Something else here</dropdown-item>
    <div class="dropdown-divider"></div>
    <dropdown-item>Separated link</dropdown-item>
  </dropdown-menu>
</dropdown>
      

Dropup variation

Trigger dropdown menus above elements by adding .dropup to the parent.

                        
<dropdown btn-group class="dropup">
  <dropdown-toggle>Dropup</dropdown-toggle>
  <dropdown-menu>
    <dropdown-item>Action</dropdown-item>
    <dropdown-item>Another action</dropdown-item>
    <dropdown-item>Something else here</dropdown-item>
    <div class="dropdown-divider"></div>
    <dropdown-item>Separated link</dropdown-item>
  </dropdown-menu>
</dropdown>
      

Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

                        
<dropdown>
  <dropdown-toggle>This dropdown's menu is right-aligned</dropdown-toggle>
  <dropdown-menu class="dropdown-menu-right">
    <dropdown-item>Action</dropdown-item>
    <dropdown-item>Another action</dropdown-item>
    <dropdown-item>Something else here</dropdown-item>
    <dropdown-item>Separated link</dropdown-item>
  </dropdown-menu>
</dropdown>
      



Disabled menu items

Add .disabled to items in the dropdown to style them as disabled.

                        
<dropdown>
  <dropdown-toggle>Basic dropdown</dropdown-toggle>
  <dropdown-menu>
    <dropdown-item>Regular link</dropdown-item>
    <dropdown-item class="disabled">Disabled link</dropdown-item>
    <dropdown-item>Another link</dropdown-item>
  </dropdown-menu>
</dropdown>