Documentation
Documentation Hub

BaseDropdown

Dropdown left

Dropdowns have button shapes and are left aligned by default. Here is an example of a default dropdown button.

Show code

Dropdown right

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

Show code

Compact menu

Dropdowns menus can have a smaller width. Use the compact prop to change the width of the dropdown menu.

Show code

Context left

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

Show code

Context right

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

Show code

Text left

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

Show code

Text right

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

Show code

Icon slot

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

Show code

Avatar slot

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

Show code

Menu header

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

Show code

#<BaseDropdown>

Properties

size
The size of the dropdown.
Show example
color
The color of the dropdown.
Show example
label
The label to display for the dropdown.
Show example
shape
The shape of the dropdown.
Show example
orientation
The orientation of the dropdown.
Show example
flavor
The flavor of the dropdown.
Show example
button-color
The color of the button.
Show example
header-label
The header label to display for the dropdown.
Show example

Slots

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

#<BaseDropdownItem>

Properties

type
The type of button.
Show example
rel
The value for the `rel` attribute on the button.
Show example
to
The route to navigate to when the button is clicked.
Show example
title
The title to display for the dropdown item.
Show example
color
The color of the dropdown-item.
Show example
shape
The shape of the dropdown-item.
Show example
disabled
Whether the button is disabled.
Show example
classes
Optional CSS classes to apply to the wrapper, label, input, addon, error, and icon elements.
Show example
text
The text to display for the dropdown item.
Show example
href
Using href instead of to result in a native anchor with no router functionality.
Show example
target
The value for the `target` attribute on the button.
Show example

Slots

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

#<BaseDropdownDivider>

Basic usage

This component has no props