# Dropdown

Dropdown component is used to display contextual overlay box for lists of links, or other items. Dropdown placement is calculated using PopperJS (opens new window), therefore, you can provide your own custom popperConfig object as a prop if you want to customize the control of dropdown menu placement.

By default popper placement is set to bottom-start

# Using dropdown

Dropdown component has button slot where you will usually place the button or any other element that will activate dropdown on click. Default slot will contain your elements that will be placed inside the dropdown box.

Content placed inside default slot will be injected into div with Bootstrap's .dropdown-menu class, so you can use dropdown related classes like .dropdown-menu.

<dropdown>
    <template slot="button">
        <Button>Dropdown button</Button>
    </template>
    <div v-for="i in 10" class="dropdown-item">
        Dropdown item: {{i}}
    </div>
</dropdown>

You utilize size classes to make dropdown menu bigger or smaller. These classes are available to use with menu-classes prop:

  • dropdown-menu-lg
  • dropdown-menu-md
  • dropdown-menu-sm
  • dropdown-menu-xs
<dropdown menu-classes="dropdown-menu-lg p-4">
    <template #button>
        <Button>Dropdown lg</Button>
    </template>
    <div>
        <h3>This is content of large dropdown menu</h3>
        <p>With some nice text</p>
        <Button type="secondary">And a button</Button>
    </div>
</dropdown>
<dropdown menu-classes="dropdown-menu-md">
    <template #button>
        <Button class="mt-4">Dropdown sm</Button>
    </template>
    <div class="dropdown-header">
        A nice header
    </div>
    <div class="dropdown-divider"></div>
    <div class="dropdown-item" v-for="i in 4">
        Super cool dropdown item {{i}}
    </div>
</dropdown>

TIP

You can extend or modify sizes by changing values of $dropdown-menu-sizes variable in src/assets/scss/core/_variables.scss file.

# Props

name default description required type
component div false String
menuClasses Additional classes that will be applied to dropdown-menu false 0
manualClose false If set to true dropdown menu will be opened on button click,but closing must be handled manually by developer. Recommended way ofclosing is adding ref (dropdownRefName) in parent and calling close function: this.$refs.dropdownRefName.close()Useful when you want to display something like form, or other content that should be clickable but should not closethe dropdown menu false Boolean
noOffset false If provided as true - popper offset will be 0 and dropdown will be positioned with no offset false Boolean
yOffset 5 Y offset of popper in pixels false 0
noAnimation false If provided as true - no animation for dropdown menu will be made false Boolean
popperConfig Popper js configuration that will be passed to popper object. This configuration will be prioritized over default values false Object