Dropdown / Components

A dropdown menu component that provides a flexible way to display a list of options or actions. It supports various features like positions, hints, titles and custom content.

Plese note: components using popout (Tooltip, Dropdown & Popout) cannot be styled using scoped CSS in Vue SFC. However, you can just define a new <style> tag, style the popout inside and keep rest of your CSS scoped in a separate <style scoped>.

Source

Props

Name	Default	Type
`placement`	`bottom-start`	`top` `right` `bottom` `left` `top-start` `top-end` `right-start` `right-end` `bottom-start` `bottom-end` `left-start` `left-end` Position of the dropdown relative to the trigger
`minWidth`	`156`	`number` `string` Minimum width of the dropdown in pixels or CSS units
`maxHeight`	`356`	`number` `string` Maximum height of the dropdown before scrolling in pixels or CSS units
`noMobileDrawer`	`false`	`boolean` Disables mobile drawer behavior and always uses floating dropdown
`transition-name`	—	`string` `none` Allows you to change or disable the Vue transition for dropdown appear. By default, placement-based transition is used. Set to `none` when using the View Transitions API to prevent the default animation from conflicting with your view transition.

Events

Name	Type	Description
`close`	-	Emitted when the dropdown is closed

Slots

Name	Accepts	Props	Description
`trigger`	`any`	`DropdownSlotsProps`	The element that triggers the dropdown
`default`	`any`	`DropdownSlotsProps`	The dropdown content

Both slots share the same exposed properties

interface DropdownSlotsProps {
  isOpen: Ref<boolean>
  open: () => void
  close: () => void
  toggle: () => void
}

Nested dropdowns

Use PopoutHover inside a dropdown to create multi-level menus. Nest it anywhere in the default slot and use placement="right-start" (or left-start) to open the submenu to the side.

Components

The dropdopwn component is meant to be used with a few specific components. If you're looking for a generic floating component, check out the Popout.

DropdownItem

A clickable item in the dropdown menu.

Props

Name	Default	Type
`disabled`	`false`	`boolean` Whether the item is disabled
`size`	—	`'s'` `'m'` Size of the dropdown item

Slots

Name	Accepts	Props	Description
`default`	`any`	-	The main content of the item
`hint`	`any`	-	Additional hint text to display

DropdownTitle

A title or header section in the dropdown menu which also divides the dropdown into sections.

Props

Name	Default	Type
`sticky`	`false`	`boolean` Whether the title should stick to the top

Slots

Name	Accepts	Props	Description
`default`	`any`	-	The title text
`end`	`any`	-	Content to display at the end of the title

Tokens

CSS variable tokens used for global or per-instance manipulation of certain styling.

Token	Default	Description
`--vui-dropdown-min-width`	`128px`	Minimum dropdown width
`--vui-dropdown-max-height`	`none`	Maximum dropdown height