Dropdown

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

Usage

Default

<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

Data table
	Type	Description
align	"left" \| "right"	Menu alignment relative to the trigger ('left' \| 'right').
aria-describedby	string	Accessible description id(s) for the trigger button.
aria-label	string	Accessible label for the trigger button. Prefer this when the trigger is icon-only.
aria-labelledby	string	Accessible labelledby target for the trigger button.
className	string	Custom class name for the dropdown wrapper.
closeOnSelect	boolean	Whether the menu should close after selecting an item. Default is usually true for action menus.
data-testid	string	Optional test ID for testing frameworks.
focusFirstItemOnOpen	boolean	Whether keyboard focus should move to the first item when the menu opens. Default behavior in your base already does this logically.
items	DropdownItem[]	Array of items to render in the dropdown menu.
menuAriaDescribedby	string	Accessible description id(s) for the menu.
menuAriaLabel	string	Accessible label for the menu itself. Falls back to `aria-label` in many implementations.
menuAriaLabelledby	string	Accessible labelledby target for the menu. Prefer this over `menuAriaLabel` when visible text labels the menu.
menuClassName	string	Custom class name for the dropdown menu.
menuId	string	Optional id for the menu element. Useful when composing with external controls/tests.
menuRounding	RoundingType	Rounding of the dropdown menu ('none' \| 'small' \| 'medium' \| 'large' \| 'full').
menuShadow	ShadowType	Shadow style for the dropdown menu ('none' \| 'light' \| 'medium' \| 'strong' \| 'intense').
state	StateType	State of the dropdown ('success' \| 'error' \| 'warning' \| 'disabled' \| '').
theme	ThemeType	Theme for styling ('primary' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'clear').
title	string	Optional title/tooltip text for the trigger.
toggleOutline	boolean	Whether to use the outline style on the toggle button.
toggleRounding	RoundingType	Rounding of the toggle button ('none' \| 'small' \| 'medium' \| 'large' \| 'full').
toggleShadow	ShadowType	Shadow style for the toggle button ('none' \| 'light' \| 'medium' \| 'strong' \| 'intense').
triggerIcon	ComponentType<{ className?: string; "aria-hidden"?: boolean; focusable?: boolean; }>	Icon component used for the trigger button.
triggerId	string	Optional id for the trigger element.