Dropdowns

You can use dropdowns to display accessible contextual overlays for displaying lists of links and more.

Basic Example

You can create dropdowns using the <d-dropdown> component.

<d-dropdown text="Dropdown">
    <d-dropdown-item>Action</d-dropdown-item>
    <d-dropdown-item>Another action</d-dropdown-item>
    <d-dropdown-item>Something else here</d-dropdown-item>
    <d-dropdown-divider />
    <d-dropdown-item>Separated link</d-dropdown-item>
</d-dropdown>

<!-- dropdown-1.vue -->

Theme Color

Changing the theme color can be easily achieved using the theme prop.

<d-dropdown text="Dropdown" theme="success">
    <d-dropdown-item>Action</d-dropdown-item>
    <d-dropdown-item>Another action</d-dropdown-item>
    <d-dropdown-item>Something else here</d-dropdown-item>
    <d-dropdown-divider />
    <d-dropdown-item>Separated link</d-dropdown-item>
</d-dropdown>

<!-- dropdown-2.vue -->

Positioning

By default dropdown menus are left aligned. However, you can change this by applying a right alignment using the right prop.


<div>
    <d-dropdown text="Left Align" class="mr-2">
        <d-dropdown-item>Action</d-dropdown-item>
        <d-dropdown-item>Another action</d-dropdown-item>
        <d-dropdown-item>Something else here</d-dropdown-item>
        <d-dropdown-divider />
        <d-dropdown-item>Separated link</d-dropdown-item>
    </d-dropdown>

    <d-dropdown text="Right Align" right>
        <d-dropdown-item>Action</d-dropdown-item>
        <d-dropdown-item>Another action</d-dropdown-item>
        <d-dropdown-item>Something else here</d-dropdown-item>
        <d-dropdown-divider />
        <d-dropdown-item>Separated link</d-dropdown-item>
    </d-dropdown>
</div>

<!-- dropdown-3.vue -->

Drop-up

Turning dropdown menus into drop-up menus can be easily achieved using the dropup prop.

<d-dropdown text="Dropdown" dropup>
    <d-dropdown-item>Action</d-dropdown-item>
    <d-dropdown-item>Another action</d-dropdown-item>
    <d-dropdown-item>Something else here</d-dropdown-item>
    <d-dropdown-divider />
    <d-dropdown-item>Separated link</d-dropdown-item>
</d-dropdown>

<!-- dropdown-4.vue -->

Split Buttons

Using the split prop you can create split-type dropdowns. You can hook into the click event for the left-side button.

<template>
    <d-dropdown text="Dropdown" split @click="handleClick">
        <d-dropdown-item>Action</d-dropdown-item>
        <d-dropdown-item>Another action</d-dropdown-item>
        <d-dropdown-item>Something else here</d-dropdown-item>
        <d-dropdown-divider />
        <d-dropdown-item>Separated link</d-dropdown-item>
    </d-dropdown>
</template>

<script>
    export default {
        methods: {
            handleClick() {
                alert('Split button was clicked!')
            }
        }
    }
</script>

<!-- dropdown-5.vue -->

Sizing

Using the size prop you can control the dropdown button's size.

<div>
    <d-dropdown text="Large" size="lg">
        <d-dropdown-item>Action</d-dropdown-item>
        <d-dropdown-item>Another action</d-dropdown-item>
        <d-dropdown-item>Something else here</d-dropdown-item>
        <d-dropdown-divider />
        <d-dropdown-item>Separated link</d-dropdown-item>
    </d-dropdown>

    <d-dropdown text="Normal">
        <d-dropdown-item>Action</d-dropdown-item>
        <d-dropdown-item>Another action</d-dropdown-item>
        <d-dropdown-item>Something else here</d-dropdown-item>
        <d-dropdown-divider />
        <d-dropdown-item>Separated link</d-dropdown-item>
    </d-dropdown>

    <d-dropdown text="Small" size="sm">
        <d-dropdown-item>Action</d-dropdown-item>
        <d-dropdown-item>Another action</d-dropdown-item>
        <d-dropdown-item>Something else here</d-dropdown-item>
        <d-dropdown-divider />
        <d-dropdown-item>Separated link</d-dropdown-item>
    </d-dropdown>
</div>

<!-- dropdown-6.vue -->

Offsets

If you'd like to offset your dropdown menu, you can use the offset propto specify the number of pixels you would like to push the menu to either left or right depending on the value you are using (positive for pushing, negative for pulling).

<d-dropdown text="Dropdown" offset="30">
    <d-dropdown-item>Action</d-dropdown-item>
    <d-dropdown-item>Another action</d-dropdown-item>
    <d-dropdown-item>Something else here</d-dropdown-item>
    <d-dropdown-divider />
    <d-dropdown-item>Separated link</d-dropdown-item>
</d-dropdown>

<!-- dropdown-7.vue -->

Props

Prop	Description	Type	Default	Required
:id	The element ID.	`String`	null	False
:menu-id	The dropdown menu ID.	`String`	null	False
:toggle-id	The toggle ID.	`String`	null	False
:menu-class	The dropdown menu class(es).	`String \| Array`	null	False
:toggle-class	The dropdown toggle class(es).	`String \| Array`	null	False
:right	Align the menu to the right.	`Boolean`	false	False
:no-caret	Whether to display the caret, or not.	`Boolean`	false	False
:split	Whether to split the dropdown, or not.	`Boolean`	false	False
:theme	The color theme.	`String`	"primary"	False
:size	The dropdown toggle's size.	`String`	null	False
:disabled	The dropdown's disabled state.	`Boolean`	false	False
:toggle-text	The dropdown toggle's text.	`String`	"Toggle Dropdown"	False
:text	The button label's text.	`String`	""	False
:boundary	The dropdown's boundary.	`String`	"scrollParent"	False
:offset	The offset value.	`Number \| String`	null	False
:dropup	Display on top.	`Boolean`	false	False
:popper-options	The Popper options.	`Object`	default() { return {}; }	False
:no-flip	Disable autoflipping.	`Boolean`	false	False
:is-nav	Whether the dropdown is displayed inside a nav, or not.	`Boolean`	false	False

Subcomponents

The following subcomponents are available for the <d-dropdown/> component:

<d-dropdown-divider/>

Props

Prop	Description	Type	Default	Required
:tag	The component tag.	`String`	"div"	False

<d-dropdown-header/>

Props

Prop	Description	Type	Default	Required
:tag	The component tag.	`String`	"h6"	False
:id	The component ID.	`String`	null	False

<d-dropdown-item/>

This subcomponent is inheriting Link component's props.