Dropdown

The Dropdown component provides a menu for users to select from options, with customizable appearance, alignment, and items.

Usage & Examples

Default

default.tsx

<Dropdown
  items={[
    { label: "Profile", icon: <FaUser />, onClick: () => alert("View Profile") },
    { label: "Settings", icon: <FaCog />, onClick: () => alert("Settings clicked") },
    { label: "Logout", icon: <FaSignOutAlt />, onClick: () => alert("Logged out"), "data-testid": "logout-button" },
  ]}
/>

Props API

Dropdown props API
				Default	Description
`align`	`"left" \| "right"`	No	props	`"right"`	Menu alignment relative to the trigger ('left' \| 'right').
`aria-describedby`	`string`	No	aria	`—`	Accessible description id(s) for the trigger button.
`aria-label`	`string`	No	aria	`"Dropdown menu"`	Accessible label for the trigger button. Prefer this when the trigger is icon-only.
`aria-labelledby`	`string`	No	aria	`—`	Accessible labelledby target for the trigger button.
`className`	`string`	No	styling	`—`	Custom class name for the dropdown wrapper.
`closeOnSelect`	`boolean`	No	props	`true`	Whether the menu should close after selecting an item. Default is usually true for action menus.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`focusFirstItemOnOpen`	`boolean`	No	props	`true`	Whether keyboard focus should move to the first item when the menu opens. Default behavior in your base already does this logically.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Adds glass styling to the trigger IconButton and dropdown menu.
`items`	`DropdownItem[]`	Yes	props	`—`	Array of items to render in the dropdown menu.
`menuAriaDescribedby`	`string`	No	props	`—`	Accessible description id(s) for the menu.
`menuAriaLabel`	`string`	No	props	`—`	Accessible label for the menu itself. Falls back to `aria-label` in many implementations.