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

                        
<template>
  <container>
    <dropdown btn-group>
      <dropdown-toggle @click.native="toggleDropdown(0)">Basic dropdown</dropdown-toggle>
      <dropdown-menu v-show="active[0]" class="collapse-item">
        <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>
  </container>
</template>

<script>
import { Container, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbvue';

export default {
  name: 'DropdownPage',
  data() {
    return {
      active: {
        0: false
      }
    };
  },
  components: {
    Container,
    Dropdown,
    DropdownToggle,
    DropdownMenu,
    DropdownItem
  },
  methods: {
    toggleDropdown(index) {
      for (let i = 0; i < Object.keys(this.active).length; i++) {
        if (index !== i) {
          this.active[i] = false;
        }
      }
      this.active[index] = !this.active[index];
    },
    allDropdownsClose(target) {
      for (let i = 0; i < Object.keys(this.active).length; i++) {
        this.active[i] = false;
      }
    },
    onClick(e) {
      let parent = e.target;
      let body = document.getElementsByTagName('body')[0];
      while (parent !== body) {
        if (parent.classList.contains('dropdown') || parent.classList.contains('btn-group')) {
          return;
        }
        parent = parent.parentNode;
      }
      this.allDropdownsClose(e.target);
    }
  },
  mounted() {
    document.addEventListener('click', this.onClick);
  },
  destroyed() {
    document.removeEventListener('click', this.onClick);
  }
};
</script>
  
      

Material dropdowns MDB Pro component

              
<template>
  <container class="mt-5">
    <h4 class="pb-1">Material dropdown</h4>
    <dropdown>
      <dropdown-toggle color="primary" @click.native="toggleDropdown(0)">Material dropdown</dropdown-toggle>
      <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
        <dropdown-menu color="primary" v-show="active[0]" class="collapse-item">
          <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>
      </transition>
    </dropdown>
  </container>
</template>

<script>
import { Container, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbvue';

export default {
  name: 'DropdownPage',
  data() {
    return {
      active: {
        0: false
      }
    };
  },
  components: {
    Container,
    Dropdown,
    DropdownToggle,
    DropdownMenu,
    DropdownItem
  },
  methods: {
    beforeEnter(el) {
      el.style.display = 'block';
      this.elHeight = el.scrollHeight;
    },
    enter(el) {
      el.style.opacity = 1;
    },
    beforeLeave(el) {
      el.style.opacity = 0;
    },
    allDropdownsClose(target) {
      for (let i = 0; i < Object.keys(this.active).length; i++) {
        this.active[i] = false;
      }
    },
    toggleDropdown(index) {
      for (let i = 0; i < Object.keys(this.active).length; i++) {
        if (index !== i) {
          this.active[i] = false;
        }
      }
      this.active[index] = !this.active[index];
    },
    onClick(e) {
      let parent = e.target;
      let body = document.getElementsByTagName('body')[0];
      while (parent !== body) {
        if (parent.classList.contains('dropdown') || parent.classList.contains('btn-group')) {
          return;
        }
        parent = parent.parentNode;
      }
      this.allDropdownsClose(e.target);
    }
  },
  mounted() {
    document.addEventListener('click', this.onClick);
  },
  destroyed() {
    document.removeEventListener('click', this.onClick);
  }
};
</script>

<style scoped>
.collapse-item {
  opacity: 0;
  transition: .5s;
}
</style>
              
          

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>
  <container>
    <dropdown btn-group>
      <dropdown-toggle color="danger" @click.native="toggleDropdown(1)" size="lg">Large button</dropdown-toggle>
      <dropdown-menu v-show="active[1]">
        <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 color="danger" @click.native="toggleDropdown(2)" size="sm">Small button</dropdown-toggle>
      <dropdown-menu v-show="active[2]">
        <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>
  </container>
</template>

<script>
import { Container, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbvue';

export default {
  name: 'DropdownPage',
  data() {
    return {
      active: {
        1: false,
        2: false
      }
    };
  },
  components: {
    Container,
    Dropdown,
    DropdownToggle,
    DropdownMenu,
    DropdownItem
  },
  methods: {
    toggleDropdown(index) {
      for (let i = 0; i < Object.keys(this.active).length; i++) {
        if (index !== i) {
          this.active[i] = false;
        }
      }
      this.active[index] = !this.active[index];
    },
    allDropdownsClose(target) {
      for (let i = 0; i < Object.keys(this.active).length; i++) {
        this.active[i] = false;
      }
    },
    onClick(e) {
      let parent = e.target;
      let body = document.getElementsByTagName('body')[0];
      while (parent !== body) {
        if (parent.classList.contains('dropdown') || parent.classList.contains('btn-group')) {
          return;
        }
        parent = parent.parentNode;
      }
      this.allDropdownsClose(e.target);
    }
  },
  mounted() {
    document.addEventListener('click', this.onClick);
  },
  destroyed() {
    document.removeEventListener('click', this.onClick);
  }
};
</script>

      

Dropup variation

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

                        
<template>
  <dropdown btn-group dropup>
    <dropdown-toggle @click.native="toggleDropdown(3)" color="primary">Dropup</dropdown-toggle>
    <dropdown-menu v-show="active[3]" dropup class="collapse-item">
      <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>
</template>

(... Script part the same as in basic example ...)

      

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.

                        
<template>
  <dropdown btn-group>
    <dropdown-toggle @click.native="toggleDropdown(4)" color="primary">This dropdown's menu is right-aligned</dropdown-toggle>
    <dropdown-menu v-show="active[4]" right class="collapse-item">
      <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>
</template>

(... Script part the same as in basic example ...)

      



Disabled menu items

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

                        
<template>
  <dropdown>
    <dropdown-toggle @click.native="toggleDropdown(7)" color="primary">Dropdown</dropdown-toggle>
    <dropdown-menu v-show="active[7]" class="collapse-item">
      <dropdown-item>Regular link</dropdown-item>
      <dropdown-item class="disabled">Disabled link</dropdown-item>
      <dropdown-item>Another link</dropdown-item>
    </dropdown-menu>
  </dropdown>
</template>

(... Script part the same as in basic example ...)

      

Active menu items

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

                      
<template>
  <dropdown>
    <dropdown-toggle @click.native="toggleDropdown(13)" color="primary">Dropdown</dropdown-toggle>
    <dropdown-menu v-show="active[13]" class="collapse-item">
      <dropdown-item>Action</dropdown-item>
      <dropdown-item active>Active</dropdown-item>
      <dropdown-item>Something else here</dropdown-item>
      <div class="dropdown-divider"></div>
      <dropdown-item>Separated link</dropdown-item>
    </dropdown-menu>
  </dropdown>
</template>

(... Script part the same as in basic example ...)
                      
                      

Dropright variation

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

                        
<template>
  <dropdown btn-group>
    <btn color="danger">Dropright</btn>
  </dropdown>
  <dropdown btn-group split dropright>
    <dropdown-toggle @click.native="toggleDropdown(10)" color="danger" class="px-3"></dropdown-toggle>
    <dropdown-menu v-show="active[10]" dropright class="collapse-item">
      <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>
</template>

(... Script part the same as in basic example ...)

      

Dropleft variation

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

              
<template>
  <dropdown btn-group dropleft style="padding-left: 200px">
    <dropdown-toggle @click.native="toggleDropdown(11)" color="danger" class="px-3"></dropdown-toggle>
    <dropdown-menu v-show="active[11]" dropleft class="collapse-item">
      <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 split>
    <btn color="danger">Dropleft</btn>
  </dropdown>
</template>

(... Script part the same as in basic example ...)