Documentation
Documentation Hub

Size

Dropdowns have button shapes and are left aligned by default. Dropdown menu can also have different widths using the size prop.

Show code

Contrast

Dropdowns menus can have a darker color in dark mode. Use the color prop to change the contrast of the dropdown menu when in dark mode.

Show code

Button:color

Dropdowns buttons can have different colors. Use the button-color prop to change the dropdown button color.

Show code

Button:end

Dropdowns can also be right aligned. Use the orientation prop to change the alignment of the dropdown.

Show code

Context:start

Dropdowns can be used as context menus. Use the variant prop with the context value to change the dropdown to a context menu.

Show code

Context:end

Dropdowns can be used as context menus. You can also align it to the end using the orientation prop.

Show code

Text:start

Dropdowns can also be used as text menus. Use the variant prop with the text value to change the dropdown to a text menu.

Show code

Text:end

Dropdowns can also be used as text menus. Use the variant prop with the text value to change the dropdown to a text menu.

Show code

Slot:icon

Dropdowns items can have an icon. Use the start slot to add an icon to the dropdown item.

Show code

Slot:avatar

Dropdowns items can have an avatar. Use the start slot to add an icon to the dropdown item.

Show code

Slot:header

Dropdowns menus can have a header. Use the headerLabel prop to add a header text to the dropdown menu.

Show code

#<BaseDropdown>

Properties

rounded
The radius of the dropdown button.

@since

2.0.0

@default

'sm'

Show example
size
The size of the dropdown.

@default

'md'

Show example
variant
The variant of the dropdown.

@since

2.0.0

@default

'button'

Show example
color
The color of the dropdown.

@default

'white'

Show example
button-color
The color of the button.

@default

'default'

Show example
orientation
The orientation of the dropdown.

@deprecated

use placement instead

Show example
placement
The placement of the dropdown via floating-ui.
Show example
label
The label to display for the dropdown.
Show example
header-label
The header label to display for the dropdown.
Show example
fixed
Used a fixed strategy to float the component
Show example

Slots

#button
Show example
#label
Show example
#default
Show example

#<BaseDropdownItem>

Properties

rounded
The radius of the dropdown-item.

@since

2.0.0

@default

'sm'

Show example
text
The text to display for the dropdown item.
Show example
type
The type of button.
Show example
to
The route to navigate to when the button is clicked.
Show example
href
Using href instead of to result in a native anchor with no router functionality.
Show example
rel
The value for the `rel` attribute on the button.
Show example
target
The value for the `target` attribute on the button.
Show example
color
The color of the dropdown-item.

@default

'default'

Show example
title
The title to display for the dropdown item.
Show example
classes
Optional CSS classes to apply to the wrapper and inner elements.
Show example
disabled
Whether the button is disabled.
Show example

Slots

#start
Show example
#default
Show example
#text
Show example
#end
Show example

#<BaseDropdownDivider>

Basic usage

This component has no props