Dropdowns

Vue Bootstrap 5 Dropdown component

Toggle contextual overlays for displaying lists of links and more with the MDB dropdown plugin.

Note: Read the API tab to find all available options and advanced customization

Basic examples

Wrap the MDBDropdownToggle (your button or link) and the MDBDropdownMenu within MDBDropdown element. Bind any truthy or falsy ref value to MDBDropdownMenu and toggle dropdown with a MDBDropdownToggle component. MDBDropdownMenu use semantic <ul> elements where appropriate, but custom markup is supported.

Regular button

MDBDropdownToggle is a regular button with primary color by default. 

        
            
              <template>
                <MDBDropdown v-model="dropdown1">
                  <MDBDropdownToggle @click="dropdown1 = !dropdown1">
                    Dropdown button
                  </MDBDropdownToggle>
                  <MDBDropdownMenu aria-labelledby="dropdownMenuButton">
                    <MDBDropdownItem href="#">Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </template>
            
        
    
        
            
              <script>
                import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from "mdb-vue-ui-kit";
                import { ref } from 'vue';
                export default {
                  components: {
                    MDBDropdown,
                    MDBDropdownToggle,
                    MDBDropdownMenu,
                    MDBDropdownItem
                  },
                  setup() {
                    const dropdown1 = ref(false);
                    return {
                      dropdown1
                    }
                  }
                };
              </script>

Colors

You can do this with any button variant:

        
            
            <template>
              <!-- Primary -->
              <MDBDropdown btnGroup v-model="dropdown3">
                <MDBDropdownToggle @click="dropdown3 = !dropdown3">
                  Action
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem href="#">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
              <!-- Secondary -->
              <MDBDropdown btnGroup v-model="dropdown4">
                <MDBDropdownToggle
                  @click="dropdown4 = !dropdown4"
                  color="secondary"
                >
                  Action
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem href="#">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
              <!-- Success -->
              <MDBDropdown btnGroup v-model="dropdown5">
                <MDBDropdownToggle
                  @click="dropdown5 = !dropdown5"
                  color="success"
                >
                  Action
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem href="#">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
              <!-- Info -->
              <MDBDropdown btnGroup v-model="dropdown6">
                <MDBDropdownToggle @click="dropdown6 = !dropdown6" color="info">
                  Action
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem href="#">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
              <!-- Warning -->
              <MDBDropdown btnGroup v-model="dropdown7">
                <MDBDropdownToggle
                  @click="dropdown7 = !dropdown7"
                  color="warning"
                >
                  Action
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem href="#">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
              <!-- Danger -->
              <MDBDropdown btnGroup v-model="dropdown8">
                <MDBDropdownToggle @click="dropdown8 = !dropdown8" color="danger">
                  Action
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem href="#">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
              <!-- Dark -->
              <MDBDropdown btnGroup v-model="dropdown9">
                <MDBDropdownToggle @click="dropdown9 = !dropdown9" color="dark">
                  Action
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem href="#">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
              <!-- Light -->
              <MDBDropdown btnGroup v-model="dropdown10">
                <MDBDropdownToggle
                  @click="dropdown10 = !dropdown10"
                  color="light"
                >
                  Action
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem href="#">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
              <!-- Link -->
              <MDBDropdown btnGroup v-model="dropdown11">
                <MDBDropdownToggle @click="dropdown11 = !dropdown11" color="link">
                  Action
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem href="#">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </template>
          
        
    
        
            
            <script>
              import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from "mdb-vue-ui-kit";
              import { ref } from 'vue';
              export default {
                components: {
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem
                },
                setup() {
                  const dropdown3 = ref(false);
                  const dropdown4 = ref(false);
                  const dropdown5 = ref(false);
                  const dropdown6 = ref(false);
                  const dropdown7 = ref(false);
                  const dropdown8 = ref(false);
                  const dropdown9 = ref(false);
                  const dropdown10 = ref(false);
                  const dropdown11 = ref(false);
                  const dropdown12 = ref(false);
                  return {
                    dropdown3,
                    dropdown4,
                    dropdown5,
                    dropdown6,
                    dropdown7,
                    dropdown8,
                    dropdown9,
                    dropdown10,
                    dropdown11,
                    dropdown12
                  }
                }
              };
            </script>

Split button

Similarly, create split button dropdowns by placing regular MDBBtn> component and additional MDBDropdownToggle> with split> property for proper spacing around the dropdown caret.

We use this extra class to reduce the horizontal padding> on either side of the caret by 25% and remove the margin-left> that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button. 

        
            
            <template>
              <!-- Example split primary button -->
              <MDBDropdown btnGroup v-model="dropdown12">
                <MDBBtn color="primary">Action</MDBBtn>
                <MDBDropdownToggle split @click="dropdown12 = !dropdown12" />
                <MDBDropdownMenu>
                  <MDBDropdownItem href="#">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </template>
          
        
    
        
            
            <script>
              import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBBtn } from "mdb-vue-ui-kit";
              import { ref } from 'vue';
              export default {
                components: {
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem,
                  MDBBtn
                },
                setup() {
                  const dropdown12 = ref(false);
                  return {
                    dropdown12
                  }
                }
              };
            </script>

Sizing

MDBDropdownToggle work with all button sizes, including default and split dropdown buttons. 

        
            
            <template>
              <div>
                <!-- Large button groups (default and split) -->
                <MDBDropdown btnGroup v-model="dropdown13">
                  <MDBDropdownToggle size="lg" @click="dropdown13 = !dropdown13">
                    Large button
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem href="#">Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                    <MDBDropdownItem divider />
                    <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
                <MDBDropdown btnGroup v-model="dropdown14">
                  <MDBBtn color="primary">Large split button</MDBBtn>
                  <MDBDropdownToggle
                    split
                    size="lg"
                    @click="dropdown14 = !dropdown14"
                  />
                  <MDBDropdownMenu>
                    <MDBDropdownItem href="#">Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                    <MDBDropdownItem divider />
                    <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
                <!-- Small button groups (default and split) -->
                <MDBDropdown btnGroup v-model="dropdown15">
                  <MDBDropdownToggle size="sm" @click="dropdown15 = !dropdown15">
                    Small button
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem href="#">Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                    <MDBDropdownItem divider />
                    <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
                <MDBDropdown btnGroup v-model="dropdown16">
                  <MDBBtn color="primary" size="sm">Small split button</MDBBtn>
                  <MDBDropdownToggle
                    split
                    size="sm"
                    @click="dropdown16 = !dropdown16"
                  />
                  <MDBDropdownMenu>
                    <MDBDropdownItem href="#">Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                    <MDBDropdownItem divider />
                    <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </div>
            </template>
          
        
    
        
            
            <script>
              import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBBtn } from "mdb-vue-ui-kit";
              import { ref } from 'vue';
              export default {
                components: {
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem,
                  MDBBtn
                },
                setup() {
                  const dropdown13 = ref(false);
                  const dropdown14 = ref(false);
                  const dropdown15 = ref(false);
                  const dropdown16 = ref(false);
                  return {
                    dropdown13,
                    dropdown14,
                    dropdown15,
                    dropdown16
                  }
                }
              };
            </script>

Directions

Dropup

Trigger dropdown menus above elements by adding dropup property to the MDBDropdown component. 

        
            
              <template>
                <!-- Default dropup button -->
                <MDBDropdown btnGroup dropup v-model="dropdown17">
                  <MDBDropdownToggle @click="dropdown17 = !dropdown17">
                    Dropup
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem href="#">Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                    <MDBDropdownItem divider />
                    <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
                <!-- Split dropup button -->
                <MDBDropdown btnGroup dropup v-model="dropdown18">
                  <MDBBtn color="primary">Split dropup</MDBBtn>
                  <MDBDropdownToggle split @click="dropdown18 = !dropdown18" />
                  <MDBDropdownMenu>
                    <MDBDropdownItem href="#">Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                    <MDBDropdownItem divider />
                    <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </template>
            
        
    
        
            
              <script>
                import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBBtn } from "mdb-vue-ui-kit";
                import { ref } from 'vue';
                export default {
                  components: {
                    MDBDropdown,
                    MDBDropdownToggle,
                    MDBDropdownMenu,
                    MDBDropdownItem,
                    MDBBtn
                  },
                  setup() {
                    const dropdown17 = ref(false);
                    const dropdown18 = ref(false);
                    return {
                      dropdown17,
                      dropdown18
                    }
                  }
                };
              </script>

Dropright

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

        
            
              <template>
                <!-- Default dropend button -->
                <MDBDropdown btnGroup dropend v-model="dropdown19">
                  <MDBDropdownToggle @click="dropdown19 = !dropdown19">
                    Dropend
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem href="#">Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                    <MDBDropdownItem divider />
                    <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
                <!-- Split dropend button -->
                <MDBDropdown btnGroup dropend v-model="dropdown20">
                  <MDBBtn color="primary">Split dropend</MDBBtn>
                  <MDBDropdownToggle split @click="dropdown20 = !dropdown20" />
                  <MDBDropdownMenu>
                    <MDBDropdownItem href="#">Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                    <MDBDropdownItem divider />
                    <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </template>
            
        
    
        
            
              <script>
                import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBBtn } from "mdb-vue-ui-kit";
                import { ref } from 'vue';
                export default {
                  components: {
                    MDBDropdown,
                    MDBDropdownToggle,
                    MDBDropdownMenu,
                    MDBDropdownItem,
                    MDBBtn
                  },
                  setup() {
                    const dropdown19 = ref(false);
                    const dropdown20 = ref(false);
                    return {
                      dropdown19,
                      dropdown20
                    }
                  }
                };
              </script>

Dropleft

Trigger dropdown menus at the left of the elements by adding dropstart> property to the MDBDropdown> component. 

        
            
              <template>
                <!-- Default dropstart button -->
                <MDBDropdown btnGroup dropstart v-model="dropdown21">
                  <MDBDropdownToggle @click="dropdown21 = !dropdown21">
                    Dropstart
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem href="#">Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                    <MDBDropdownItem divider />
                    <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
                <!-- Split dropstart button -->
                <div class="btn-group">
                  <MDBDropdown btnGroup dropstart v-model="dropdown22">
                    <MDBDropdownToggle split @click="dropdown22 = !dropdown22" />
                    <MDBDropdownMenu>
                      <MDBDropdownItem href="#">Action</MDBDropdownItem>
                      <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                      <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                      <MDBDropdownItem divider />
                      <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                  <MDBBtn color="primary">Split dropstart</MDBBtn>
                </div>
              </template>
            
        
    
        
            
              <script>
                import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBBtn } from "mdb-vue-ui-kit";
                import { ref } from 'vue';
                export default {
                  components: {
                    MDBDropdown,
                    MDBDropdownToggle,
                    MDBDropdownMenu,
                    MDBDropdownItem,
                    MDBBtn
                  },
                  setup() {
                    const dropdown21 = ref(false);
                    const dropdown22 = ref(false);
                    return {
                      dropdown21,
                      dropdown22
                    }
                  }
                };
              </script>

Menu items

Historically dropdown menu contents had to be links. Now you can optionally use <button> elements in your dropdowns instead of just <a>s. 

        
            
            <template>
              <MDBDropdown v-model="dropdown23">
                <MDBDropdownToggle @click="dropdown23 = !dropdown23">
                  Dropdown
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem tag="button">Action</MDBDropdownItem>
                  <MDBDropdownItem tag="button">Another Action</MDBDropdownItem>
                  <MDBDropdownItem tag="button">Something else here</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </template>
          
        
    
        
            
            <script>
              import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from "mdb-vue-ui-kit";
              import { ref } from 'vue';
              export default {
                components: {
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem
                },
                setup() {
                  const dropdown23 = ref(false);
                  return {
                    dropdown23
                  }
                }
              };
            </script>

You can also create non-interactive dropdown items with text property. Feel free to style further with custom CSS or text utilities. 

        
            
            <template>
              <MDBDropdownMenu static>
                <MDBDropdownItem text>Dropdown item text</MDBDropdownItem>
                <MDBDropdownItem href="#">Action</MDBDropdownItem>
                <MDBDropdownItem href="#">Another action</MDBDropdownItem>
                <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
              </MDBDropdownMenu>
            </template>
          
        
    
        
            
            <script>
              import { MDBDropdownMenu, MDBDropdownItem } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBDropdownMenu,
                  MDBDropdownItem
                }
              };
            </script>

Active

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

        
            
              <template>
                <MDBDropdownMenu static>
                  <MDBDropdownItem href="#">Regular link</MDBDropdownItem>
                  <MDBDropdownItem href="#" active>Active link</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another link</MDBDropdownItem>
                </MDBDropdownMenu>
              </template>
            
        
    
        
            
              <script>
                import { MDBDropdownMenu, MDBDropdownItem } from "mdb-vue-ui-kit";
                export default {
                  components: {
                    MDBDropdownMenu,
                    MDBDropdownItem
                  }
                };
              </script>

Disabled

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

        
            
              <template>
                <MDBDropdownMenu static>
                  <MDBDropdownItem href="#">Regular link</MDBDropdownItem>
                  <MDBDropdownItem href="#" disabled>Disabled link</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another link</MDBDropdownItem>
                </MDBDropdownMenu>
              </template>
            
        
    
        
            
              <script>
                import { MDBDropdownMenu, MDBDropdownItem } from "mdb-vue-ui-kit";
                export default {
                  components: {
                    MDBDropdownMenu,
                    MDBDropdownItem
                  }
                };
              </script>

Menu alignment

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

        
            
            <MDBDropdown align="end" v-model="dropdown24">
              <MDBDropdownToggle @click="dropdown24 = !dropdown24">
                Right-aligned menu
              </MDBDropdownToggle>
              <MDBDropdownMenu>
                <MDBDropdownItem href="#">Action</MDBDropdownItem>
                <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          
        
    
        
            
            <script>
              import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from "mdb-vue-ui-kit";
              import { ref } from 'vue';
              export default {
                components: {
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem
                },
                setup() {
                  const dropdown24 = ref(false);
                  return {
                    dropdown24
                  }
                }
              };
            </script>

Responsive alignment

If you want to make dropdown alignment responsive, use the responsive variation classes.

To align right the dropdown menu with the given breakpoint or larger, add align="sm|md|lg|xl|xxl-end".

To align left the dropdown menu with the given breakpoint or larger, add align="sm|md|lg|xl|xxl-start". 

        
            
              <template>
                <MDBDropdown btnGroup align="lg-end" v-model="dropdown25">
                  <MDBDropdownToggle @click="dropdown25 = !dropdown25">
                    Left-aligned but right aligned when large screen
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem href="#">Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </template>
            
        
    
        
            
              <script>
                import {
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem,
                } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';
                export default {
                  components: {
                    MDBDropdown,
                    MDBDropdownToggle,
                    MDBDropdownMenu,
                    MDBDropdownItem,
                  },
                  setup() {
                    const dropdown25 = ref(false);
                    return {
                      dropdown25,
                    };
                  },
                };
              </script>

To align dropdown menu right by default, but left when the given breakpoint or larger, add :align="['end', 'sm|md|lg|xl|xxl-start']". 

        
            
              <template>
                <MDBDropdown btnGroup :align="['end', 'lg-start']" v-model="dropdown26">
                  <MDBDropdownToggle @click="dropdown26 = !dropdown26">
                    Right-aligned but left aligned when large screen
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem href="#">Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </template>
            
        
    
        
            
              <script>
                import {
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem,
                } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';
                export default {
                  components: {
                    MDBDropdown,
                    MDBDropdownToggle,
                    MDBDropdownMenu,
                    MDBDropdownItem,
                  },
                  setup() {
                    const dropdown26 = ref(false);
                    return {
                      dropdown26,
                    };
                  },
                };
              </script>

Note that you don’t need to add a data-mdb-display="static" attribute to dropdown buttons in navbars, since Popper isn’t used in navbars.

Menu content

Headers

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

        
            
              <template>
                <MDBDropdownMenu static>
                  <MDBDropdownItem tag="h6" header>Dropdown header</MDBDropdownItem>
                  <MDBDropdownItem href="#">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                </MDBDropdownMenu>
              </template>
            
        
    
        
            
              <script>
                import { MDBDropdownMenu, MDBDropdownItem } from "mdb-vue-ui-kit";
                export default {
                  components: {
                    MDBDropdownMenu,
                    MDBDropdownItem
                  }
                };
              </script>

Dividers

Separate groups of related menu items with a divider property. 

        
            
              <template>
                <MDBDropdownMenu static>
                  <MDBDropdownItem href="#">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                </MDBDropdownMenu>
              </template>
            
        
    
        
            
              <script>
                import { MDBDropdownMenu, MDBDropdownItem } from "mdb-vue-ui-kit";
                export default {
                  components: {
                    MDBDropdownMenu,
                    MDBDropdownItem
                  }
                };
              </script>

Text

Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.

Some example text that's free-flowing within the dropdown menu.

And this is more example text.

        
            
              <template>
                <MDBDropdownMenu
                  static
                  class="p-4 text-muted"
                  style="max-width: 200px;"
                >
                  <p>
                    Some example text that's free-flowing within the dropdown
                    menu.
                  </p>
                  <p class="mb-0">And this is more example text.</p>
                </MDBDropdownMenu>
              </template>
            
        
    
        
            
              <script>
                import { MDBDropdownMenu } from "mdb-vue-ui-kit";
                export default {
                  components: {
                    MDBDropdownMenu
                  }
                };
              </script>

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.

Forgot password?
New around here? Sign up Forgot password? 
        
            
              <template>
                <MDBDropdownMenu static>
                  <form class="px-4 py-3">
                    <!-- Email input -->
                    <MDBInput
                      label="Email address"
                      type="email"
                      class="mb-4"
                      v-model="inputValue1"
                    ></MDBInput>
                    <!-- Password input -->
                    <MDBInput
                      label="Password"
                      type="password"
                      class="mb-4"
                      v-model="inputValue2"
                    ></MDBInput>
                    <!-- 2 column grid layout for inline styling -->
                    <MDBRow class="mb-4">
                      <MDBCol class="d-flex justify-content-center">
                        <!-- Checkbox -->
                        <MDBCheckbox label="Remember me" v-model="checkboxValue1"></MDBCheckbox>
                      </MDBCol>
                      <MDBCol>
                        <!-- Simple link -->
                        <a href="#!">Forgot password?</a>
                      </MDBCol>
                    </MDBRow>
                    <!-- Submit button -->
                    <MDBBtn type="submit" color="primary" block>
                      Sign in
                    </MDBBtn>
                  </form>
                  <MDBDropdownItem divider></MDBDropdownItem>
                  <MDBDropdownItem href="#">New around here? Sign up</MDBDropdownItem>
                  <MDBDropdownItem href="#">Forgot password?</MDBDropdownItem>
                </MDBDropdownMenu>
              </template>
            
        
    
        
            
              <script>
                import { MDBDropdownMenu, MDBDropdownItem, MDBRow, MDBCol, MDBInput, MDBBtn, MDBCheckbox } from "mdb-vue-ui-kit";
                import { ref } from 'vue';
                export default {
                  components: {
                    MDBDropdownMenu,
                    MDBDropdownItem,
                    MDBRow,
                    MDBCol,
                    MDBInput,
                    MDBBtn,
                    MDBCheckbox
                  },
                  setup() {
                    const inputValue1 = ref('');
                    const inputValue2 = ref('');
                    const checkboxValue1 = ref(true);
                    return {
                      inputValue1,
                      inputValue2,
                      checkboxValue1
                    }
                  }
                };
              </script>
Forgot password?
New around here? Sign up Forgot password? 
        
            
              <template>
                <MDBDropdown v-model="dropdown27">
                  <MDBDropdownToggle @click="dropdown27 = !dropdown27">
                    Dropdown form
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <form class="px-4 py-3">
                      <!-- Email input -->
                      <MDBInput
                        label="Email address"
                        type="email"
                        class="mb-4"
                        v-model="inputValue3"
                      ></MDBInput>
                      <!-- Password input -->
                      <MDBInput
                        label="Password"
                        type="password"
                        class="mb-4"
                        v-model="inputValue4"
                      ></MDBInput>
                      <!-- 2 column grid layout for inline styling -->
                      <MDBRow class="mb-4">
                        <MDBCol class="d-flex justify-content-center">
                          <!-- Checkbox -->
                          <MDBCheckbox
                            label="Remember me"
                            v-model="checkboxValue2"
                          ></MDBCheckbox>
                        </MDBCol>
                        <MDBCol>
                          <!-- Simple link -->
                          <a href="#!">Forgot password?</a>
                        </MDBCol>
                      </MDBRow>
                      <!-- Submit button -->
                      <MDBBtn type="submit" color="primary" block>
                        Sign in
                      </MDBBtn>
                    </form>
                    <MDBDropdownItem divider></MDBDropdownItem>
                    <MDBDropdownItem href="#">New around here? Sign up</MDBDropdownItem>
                    <MDBDropdownItem href="#">Forgot password?</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </template>
            
        
    
        
            
              <script>
                import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBRow, MDBCol, MDBInput, MDBCheckbox } from "mdb-vue-ui-kit";
                import { ref } from 'vue';
                export default {
                  components: {
                    MDBDropdown,
                    MDBDropdownToggle,
                    MDBDropdownMenu,
                    MDBDropdownItem,
                    MDBRow,
                    MDBCol,
                    MDBInput,
                    MDBCheckbox
                  },
                  setup() {
                    const inputValue3 = ref('');
                    const inputValue4 = ref('');
                    const checkboxValue2 = ref(true);
                    const dropdown27 = ref(true);
                    return {
                      inputValue3,
                      inputValue4,
                      checkboxValue2,
                      dropdown27,
                    }
                  }
                };
              </script>

Remove animation

To remove the fade animation on click, add :animation="false" attribute to the MDBDRopdownToggle. 

        
            
            <template>
              <MDBDropdown v-model="dropdown28">
                <MDBDropdownToggle
                  @click="dropdown28 = !dropdown28"
                  id="dropdownExampleAnimation"
                >
                  Dropdown button
                </MDBDropdownToggle>
                <MDBDropdownMenu :animation="false">
                  <MDBDropdownItem href="#">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </template>
          
        
    
        
            
            <script>
              import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from "mdb-vue-ui-kit";
              import { ref } from 'vue';
              export default {
                components: {
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem
                },
                setup() {
                  const dropdown28 = ref(false);
                  return {
                    dropdown28
                  }
                }
              };
            </script>

Dropdown options

To change the offset of the dropdown menu add offset="skiddingValue, distanceValue" property. To change the location of the dropdown menu add target property with value of selector to expected reference for dropdown. 

        
            
            <template>
              <div class="d-flex">
                <MDBDropdown offset="10,20" class="me-1" v-model="dropdown29">
                  <MDBDropdownToggle @click="dropdown29 = !dropdown29">
                    Offset
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem href="#">Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Another action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                    <MDBDropdownItem divider />
                    <MDBDropdownItem href="#">Separated list</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
                <MDBDropdown
                  btnGroup
                  id="referenceTarget"
                  target="#referenceTarget"
                  v-model="dropdown30"
                >
                  <MDBBtn color="primary">Reference</MDBBtn>
                  <MDBDropdownToggle split @click="dropdown30 = !dropdown30">
                    <span class="visually-hidden">Toggle Dropdown</span>
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem href="#">Action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Another action</MDBDropdownItem>
                    <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                    <MDBDropdownItem divider />
                    <MDBDropdownItem href="#">Separated list</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </div>
            </template>
          
        
    
        
            
            <script>
              import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from "mdb-vue-ui-kit";
              import { ref } from 'vue';
              export default {
                components: {
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem
                },
                setup() {
                  const dropdown29 = ref(false);
                  const dropdown30 = ref(false);
                  return {
                    dropdown29,
                    dropdown30,
                  }
                }
              };
            </script>

Dark variant

Add dark property onto an existing MDBDropdownMenu to match a dark navbar. 

        
            
            <template>
              <MDBDropdown v-model="dropdown31">
                <MDBDropdownToggle
                  @click="dropdown31 = !dropdown31"
                  id="dropdownExampleAnimation"
                >
                  Dropdown button
                </MDBDropdownToggle>
                <MDBDropdownMenu dark>
                  <MDBDropdownItem href="#">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </template>
          
        
    
        
            
            <script>
              import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from "mdb-vue-ui-kit";
              import { ref } from 'vue';
              export default {
                components: {
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem
                },
                setup() {
                  const dropdown31 = ref(false);
                  return {
                    dropdown31
                  }
                }
              };
            </script>

Dropdowns - API

Import

        
            
        <script>
          import {
            MDBDropdown,
            MDBDropdownToggle,
            MDBDropdownMenu,
            MDBDropdownItem
          } from 'mdb-vue-ui-kit';
        </script>

Properties

MDBDropdown

Name Type Default Description Example
tag String 'div' Defines tag of the MDBDropdown element <MDBDropdown tag="section" />
v-model Boolean Toggle MDBDropdown component open and closed <MDBDropdown tag="true" />
btnGroup Boolean false Changes alignment of the toggler to fit within a button gro <MDBDropdown btnGroup />
dropup Boolean false Trigger dropdown menus above elements <MDBDropdown dropup />
dropend Boolean false Trigger dropdown menus at the right of the elements <MDBDropdown dropend />
dropstart Boolean false Trigger dropdown menus at the left of the elements <MDBDropdown dropstart />
align String | Array 'start' Aligns dropdown menu along the left or rigth side of the parent <MDBDropdown align="end" />
offset String Offset of the dropdown menu relative to its parent. <MDBDropdown offset="0, 10" />
target String Sets custom selector for dropdown menu reference target <MDBPopover target="#reference-target" />

MDBDropdownToggle

Name Type Default Description Example
tag String 'button' Defines tag of the MDBDropdownToggle element <MDBDropdownToggle tag="div" />
color String 'primary Sets color of the MDBDropdownToggle element <MDBDropdownToggle color="secondary" />
href String Sets href attribute if tag is set to a <MDBDropdownToggle tag="a" href="#" />
split Boolean false Allows to create split buttons <MDBBtn color="primary">Split</MDBBtn> <MDBDropdownToggle split />

MDBDropdownMenu

Name Type Default Description Example
tag String 'ul' Defines tag of the MDBDropdownMenu element <MDBDropdownMenu tag="div" />
animation Boolean true Toggle animation on dropdown menu on or off <MDBDropdownMenu :animation="false" />
dark Boolean false Sets MDBDropdownMenu element color to dark <MDBDropdownMenu dark />

MDBDropdownItem

Name Type Default Description Example
tag String 'a' Defines tag of the MDBDropdownItem element <MDBDropdownItem tag="div" />
to String | Object Changes the component's tag to router-link <MDBDropdownItem to="/" />
href String The href attribute's value of the anchor tag <MDBDropdownItem href="/" />
disabled Boolean false Disables the item <MDBDropdownItem disabled />
active Boolean false Adds active class to the item <MDBDropdownItem active />
exact Boolean false Sets exact attribute of the component <MDBDropdownItem to="/" exact />
newTab Boolean false Sets component's target to "_blank" <MDBDropdownItem href="/" newTab />
divider Boolean false Sets element as a divider <MDBDropdownItem divider />
text Boolean false Sets element as a text element <MDBDropdownItem text />
header Boolean false Sets element as a header element <MDBDropdownItem header ag="h6" />