Dropdown have button shapes and are left aligned by default. Dropdown menu can also have different widths using the size prop.
Show codeHide code
Dropdown 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 codeHide code
Dropdown buttons can have different colors. Use the button-color prop to change the dropdown button color.
Show codeHide code
Dropdown can also be right aligned. Use the orientation prop to change the alignment of the dropdown.
Show codeHide code
Dropdown can be used as context menus. Use the variant prop with the context value to change the dropdown to a context menu.
Show codeHide code
Dropdown can be used as context menus. You can also align it to the end using the orientation prop.
Show codeHide code
Dropdown can also be used as text menus. Use the variant prop with the text value to change the dropdown to a text menu.
Show codeHide code
Dropdown can also be used as text menus. Use the variant prop with the text value to change the dropdown to a text menu.
Show codeHide code
Dropdown items can have an icon. Use the start slot to add an icon to the dropdown item.
Show codeHide code
Dropdown items can have an avatar. Use the start slot to add an icon to the dropdown item.
Show codeHide code
Dropdown menus can have a header. Use the headerLabel prop to add a header text to the dropdown menu.
Show codeHide code
Dropdown items can be enhanced into a checkbox wrapping them with a using a BaseCheckboxHeadless component as well the start item slot prop to add an inner BaseCheckbox.
Show codeHide code
Dropdown items can be enhanced into a radio button wrapping them with a using a BaseRadioHeadless component as well the start item slot prop to add an inner BaseRadio.
Show codeHide code
Dropdown items can be enhanced into a switch wrapping them with a using a BaseCheckboxHeadless component as well the start item slot prop to add an inner BaseSwitchThin.
Show codeHide code
Dropdown items can be enhanced into a switch wrapping them with a using a BaseCheckboxHeadless component as well the start item slot prop to add an inner BaseSwitchBall.
Show codeHide code
Dropdown menus and items can be heavily customized, using wrapping elements, scrolling areas, as well as search and actions.
Show codeHide code
classesShow exampleHide example
fixedShow exampleHide example
header-labelShow exampleHide example
labelShow exampleHide example
colorShow exampleHide example
rounded@since
2.0.0
Show exampleHide example
placementShow exampleHide example
sizeShow exampleHide example
variant@since
2.0.0
Show exampleHide example
button-colorShow exampleHide example
#buttonShow exampleHide example
#labelShow exampleHide example
#defaultShow exampleHide example
colorShow exampleHide example
roundedShow exampleHide example
placementShow exampleHide example
sizeShow exampleHide example
variantShow exampleHide example
buttonColorShow exampleHide example
classesShow exampleHide example
disabledShow exampleHide example
hrefShow exampleHide example
relShow exampleHide example
targetShow exampleHide example
textShow exampleHide example
titleShow exampleHide example
toShow exampleHide example
typeShow exampleHide example
color@since
3.0.0
Show exampleHide example
rounded@since
2.0.0
Show exampleHide example
contrastShow exampleHide example
#startShow exampleHide example
#defaultShow exampleHide example
#textShow exampleHide example
#endShow exampleHide example
colorShow exampleHide example
roundedShow exampleHide example
contrast