Navigation

Dropdown

Trigger + floating Menu following the WAI-ARIA menu-button pattern. The trigger element is cloned with aria wiring; the popup positions itself and closes on selection. The popup renders a full Menu, so everything Menu supports — MenuSub submenus, MenuCheckboxItem, MenuRadioGroup/MenuRadioItem, icons and shortcuts — works inside a Dropdown unchanged.

Import

import { Dropdown, MenuItem, MenuGroup, MenuSeparator } from "@zephora/react";

Examples

Basic

Pass any element as `trigger`; items go in as children.

Selected: none

const [choice, setChoice] = React.useState("none");

<Dropdown trigger={<Button variant="outline">Options</Button>} onSelect={setChoice}>
  <MenuItem value="edit">Edit</MenuItem>
  <MenuItem value="share">Share</MenuItem>
  <MenuSeparator />
  <MenuItem value="delete" danger>Delete</MenuItem>
</Dropdown>
<p>Selected: {choice}</p>

Placement

Position the popup with `placement` (default bottom-start).

<Dropdown trigger={<Button>Align end</Button>} placement="bottom-end">
  <MenuGroup label="Sort by">
    <MenuItem value="name">Name</MenuItem>
    <MenuItem value="date">Date modified</MenuItem>
    <MenuItem value="size">Size</MenuItem>
  </MenuGroup>
</Dropdown>

API

Dropdown props

Prop	Type	Default	Description
`trigger` *	`ReactElement`	—	Element that toggles the menu; cloned with ref, aria and click wiring.
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled).
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`placement`	`Placement`	`"bottom-start"`	Popup position relative to the trigger.
`onSelect`	`(value: string) => void`	—	Called with the activated item value; the menu also closes.
`children`	`ReactNode`	—	Menu content: MenuItem / MenuGroup / MenuSeparator, plus MenuSub, MenuCheckboxItem and MenuRadioGroup / MenuRadioItem — the popup is a regular Menu.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

Keyboard

Key	Action
`Enter / Space / ArrowDown / ArrowUp`	On the trigger: opens the menu and focuses the first item.
`ArrowDown / ArrowUp`	Move between items inside the menu.
`Enter / Space`	Activates the focused item and closes the menu.
`Escape`	Closes the menu and returns focus to the trigger.