Dropdown

Dropdown is a flexible family of components for displaying menus, popovers, and other floating content. It supports placement, strategy, manual and automatic opening, and more.

Basic Example

Code Example
Basic.vue
Dropdown
The Dropdown component is the wrapper. Its props control appearance and behavior.
Dropdown Props  Type  Description 
open
boolean

v-model

Allows manual control of the open/closed state.

placement
string
Sets the side on which the dropdown will open. Options: - bottom-start - bottom - bottom-end - top-start - top - top-end - left-start - left - left-end - right-start - right - right-end
strategy
string
Determines the placement CSS attribute. Options: - fixed - absolute (default)
auto-focus
boolean
Enables a focus trap inside of the DropdownContent. It automatically focuses the first element. Note: There must be a focusable element or an error will be thrown. Links will either need a non-empty href or a tabindex. The user can break focus by hitting escape or clicking outside of the Dropdown.
hover
boolean
Opens the dropdown on mouseover. Closes on mouseout.
   
delay-enter
number
Changes the hover wait time before the Dropdown opens. default: 0.
   
delay-leave
number
Changes the mouseout wait time before the Dropdown closes. default: 400.
close-on-click-outside
boolean
Closes the dropdown when clicking outside of the element.
random-id
string
Allows manually specifying the internal random id. This is required for SSR.
Dropdown Events  Arguments  Description 
update:open

v-model

Allows manual control of the open/closed state.

Dropdown Slots  Description 
default
The default slot. Must contain a trigger component (like DropdownButton or DropdownTarget) and a DropdownContent. All must be direct children of the Dropdown element.
Dropdown Provides  Type  Description 
isDropdownOpen

boolean

Whether the dropdown is open or closed.
dropdownAutoFocus

boolean

Whether the dropdown should automatically focus the first element.
dropdownId

String

The unique id of the dropdown.
buttonEl

HTML Element

The button element.
contentEl

HTML Element

The content element.
floatingStyles

Object

The floating styles from floating-ui.
toggleDropdown

Function

Toggles the dropdown.
openDropdown

Function

Opens the dropdown.
closeDropdown

Function

Closes the dropdown.
DropdownButton
shows/hides the DropdownContent.
⚠️ Must be a direct child of the Dropdown element.
DropdownTarget
is an unstyled alternative to DropdownButton. Use it when you want to style the trigger element to match its siblings.
⚠️ Must be a direct child of the Dropdown element.
DropdownContent
contains the content to show when open. Don't style it. Style the child elements instead.
⚠️ Must be a direct child of the Dropdown element.
Examples
Basic
The default dropdown usage.
 Code Example 
Basic.vue
Open
Control the open state programmatically.
 Code Example 
Open.vue
Close on Click Outside
The Dropdown closes when clicking outside by default. You can disable it by setting close-on-click-outside to false. Then you'll need to click the button to hide the dropdown.
 Code Example 
CloseOnClickOutside.vue
Hover
Open the dropdown on hover.
 Code Example 
Hover.vue
Hover Delay Enter
Use delayEnter to set how long to wait before opening on hover. This example waits 1000ms before opening.
 Code Example 
HoverDelayEnter1000.vue
Hover Delay Leave
Use delayLeave to set how long to wait before closing after hover ends. The default is 300ms. This example waits 0ms before closing.
 Code Example 
HoverDelayLeave0.vue
Position
Use the position attribute to specify top, bottom, left, or right.
 Code Example 
Position.vue
Top
Dropdown positioned above the button.
 Code Example 
Top.vue
Dropdown positioned to the right of the button.
 Code Example 
Right.vue
Left
Dropdown positioned to the left of the button.
 Code Example 
Left.vue
Strategy
Use the strategy prop set to fixed to allow the dropdown to escape its container and be visible even if the parent has overflow-hidden or similar styles.
 Code Example 
Strategy.vue
DaisyUI Kit 🌼