Dropdown

Menu-style dropdown with proximity hover and animated backgrounds — as an always-visible inline panel or a triggered popup built on Base UI Menu.

Installation

Installs the Base UI flavor. Switch in the right panel.

Basic

Inspect

Teamspaces

Recents

Favorites

Shared

Private

Groups

Inspect

Account

Email

Notifications

Privacy

Appearance

General

Theme

Display

Triggered menu

The inline panels above are always visible and render as a plain group. For a real popup menu — trigger button, positioning, dismissal, typeahead, and close-on-select, built on Base UI's Menu — compose DropdownMenu, DropdownTrigger, and DropdownContent. Any element can be the trigger via the render prop.

Inspect

API Reference — Dropdown

Prop	Type	Description
checkedIndex	number	Index of the currently checked item.
children	ReactNode	MenuItem children.
aria-label	string	Accessible name for the inline panel. The always-visible panel renders as a plain role="group" — popup menu semantics (role="menu") belong to the triggered DropdownContent.

API Reference — MenuItem

Prop	Type	Default	Description
icon	IconComponent	—	Icon displayed in the menu item.
label	string	—	Text label for the menu item.
index	number	—	Position index within the dropdown.
checked	boolean	false	Whether this item is checked. When set (even false), the item is a radio-style option; when undefined it is a plain action item.
onSelect	() => void	—	Called when this item is selected.
disabled	boolean	false	Disables the item.
closeOnClick	boolean	true	Popup-only: whether selecting the item closes the menu. Ignored in the inline panel.

API Reference — DropdownMenu

Prop	Type	Default	Description
children	ReactNode	—	DropdownTrigger and DropdownContent.
open	boolean	—	Controlled open state.
defaultOpen	boolean	false	Initial open state (uncontrolled).
onOpenChange	(open: boolean) => void	—	Called when the menu opens or closes.
disabled	boolean	false	Disables opening the menu.

API Reference — DropdownTrigger

Prop	Type	Default	Description
render	ReactElement	—	Element to render as the trigger (Base UI composition), e.g. a Button.
children	ReactNode	—	Trigger content when no render element is given.
disabled	boolean	false	Disables the trigger.

API Reference — DropdownContent

Prop	Type	Default	Description
children	ReactNode	—	MenuItem, DropdownLabel, and DropdownSeparator children.
checkedIndex	number	—	Index of the checked item — drives the animated selected background and the radio-group value.
side	"top" \| "bottom" \| "left" \| "right"	"bottom"	Preferred side of the trigger to place the popup.
align	"start" \| "center" \| "end"	"start"	Alignment against the trigger.
sideOffset	number	6	Gap between trigger and popup, in pixels.

API Reference — DropdownLabel

Prop	Type	Description
children	ReactNode	Label text content.

API Reference — DropdownSeparator

Prop	Type	Description
className	string	Additional CSS classes.