Vue Dropdown Component API

Dropdown API

Explore the API reference for the Vue Dropdown component and discover how to effectively utilize its props for customization.

On this page

CDropdown

jsx

import { CDropdown } from '@coreui/vue'

Props

Property	Default	Type
alignment	-	`string`, `Alignments`
Set alignment of the dropdown menu. A responsive object aligns the menu per breakpoint and keeps dynamic positioning; `placement` wins over it.
autoClose	`true`	`boolean`, `'inside'`, `'outside'`
Configure the auto close behavior of the dropdown: - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu. - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key) - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu. - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
container5.0.0+	`'body'`	`HTMLElement`, `(() => HTMLElement)`, `string`
Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. Inside a modal dialog it goes into the dialog instead, because the rest of the page is inert.
dark	-	`boolean`
Sets a darker color scheme to match a dark navbar.
direction	-	`string`
Sets a specified direction and location of the dropdown menu.
floatingConfig5.10.0+	`undefined`	`Partial<ComputePositionConfig>`, `(( defaultFloatingConfig: Partial<ComputePositionConfig> ) => Partial<ComputePositionConfig>)`
A Floating UI configuration object, or a function that receives the default configuration and returns a modified one, used to customize the positioning of the dropdown menu. [Read more](https://floating-ui.com/docs/computePosition#options)
offset4.9.0+	`[0, 2]`	`array`
Offset of the dropdown menu relative to its target.
placement	`undefined`	`string`
Where the menu opens. Logical placements (`'start'`, `'end'`) resolve to the side the writing direction puts them on, and `-start`/`-end` are already logical. Breakpoint prefixes make it responsive — `'bottom-start md:top-end'` reads as bottom-start below `md` and top-end from `md` up. An explicit placement wins over `direction` and `alignment`; left unset, the placement follows those two props.
popper	`true`	`boolean`
Enables or disables dynamic positioning. When disabled, the menu is rendered statically and carries `data-coreui-popper="static"`.
reference5.7.0+	`'toggle'`	`'parent'`, `'toggle'`, `HTMLElement`, `Ref<HTMLElement`, `null>`
Sets the reference element for positioning the Vue Dropdown Menu. - `toggle` - The Vue Dropdown Toggle button (default). - `parent` - The Vue Dropdown wrapper element. - `HTMLElement` - A custom HTML element. - `Ref` - A custom reference element.
show6.0.0+	`undefined`	`boolean`
Control the open state. When set, the dropdown renders what `show` says and dismiss gestures only emit `update:show` — nothing closes until the parent flips the prop. Supports the `v-model:show` binding.
teleport5.0.0+	`false`	`boolean`
Generates dropdown menu using Teleport.
variant	`'dropdown'`	`string`
Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
visibleDeprecated 6.0.0	`undefined`	`boolean`
Toggle the visibility of dropdown menu component. Use `show` / `v-model:show` instead — `visible` is ignored when `show` is set.

Events

Event name
hide
Callback fired when the component requests to be hidden.
show
Callback fired when the component requests to be shown.
update:show
Emit the requested open state to support the `v-model:show` binding — a dismiss gesture (Escape, outside click, item click) or any internal toggle.

CDropdownDivider

jsx

import { CDropdownDivider } from '@coreui/vue'

CDropdownHeader

jsx

import { CDropdownHeader } from '@coreui/vue'

Property	Default	Type
as	`'h6'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.

CDropdownItem

jsx

import { CDropdownItem } from '@coreui/vue'

Property	Default	Type
active	-	`boolean`
Toggle the active state for the component.
as	`'a'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.
disabled	-	`boolean`
Toggle the disabled state for the component.
href	-	`string`
The href attribute specifies the URL of the page the link goes to.

CDropdownMenu

jsx

import { CDropdownMenu } from '@coreui/vue'

Property	Default	Type
as	`'div'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.

CDropdownToggle

jsx

import { CDropdownToggle } from '@coreui/vue'

Property	Default	Type
as	`'button'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.
caret	`true`	`boolean`
Enables pseudo element caret on toggler.
colorDeprecated 6.0.0	-	`Color`
Sets the color context of the component to one of CoreUI’s themed colors. Use `theme` instead — `color` renders the same variant and `theme-{color}` classes and loses to `theme` when both are set.
custom	-	`boolean`
Create a custom toggler which accepts any content.
disabled	-	`boolean`
Toggle the disabled state for the component.
navLink5.0.0+	`true`	`boolean`
If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
shape	-	`Shape`
-
size	-	`string`
Size the component small or large.
split	-	`boolean`
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
splitLabel5.7.0+	`'Toggle Dropdown'`	`string`
Screen reader label for split button dropdown toggle.
theme6.0.0+	-	`Color`
Sets the color context of the component to one of CoreUI’s themed colors. Pair it with `variant` for the shape — a button is a shape plus a colour.
trigger	`'click'`	`Triggers`
Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
variant	-	`string`
Set the shape of the button — how much ink it uses. Defaults to `solid` when `theme` is set.