Dropdown Menu

A list of actions or options that opens from a button.

Stable

Web

iOS

Android

@advui/core

Source

Account menu

Preview

Code

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { Button, DropdownMenu } from '@advui/core'

<DropdownMenu>
  <DropdownMenu.Trigger>
    <Button variant="outline">Options</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item onSelect={edit}>Edit</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item destructive onSelect={remove}>Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

Examples

Checkbox and radio items

View settings from an icon button.

Preview

Code

Status bar on · Side panel off · Sorted by newest

API reference

DropdownMenu

Prop	Type	Default	Description
`open`	`boolean`	—	Open state, when you control it.
`defaultOpen`	`boolean`	`false`	Open at first, when the menu manages its state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the menu opens or closes.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Where to open relative to the trigger. iOS and Android use a bottom sheet.Web only.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Alignment along that side.Web only.

DropdownMenu.Trigger

Prop	Type	Default	Description
`children` required	`ReactElement`	—	One element, usually a Button or IconButton.

DropdownMenu.Content

Prop	Type	Default	Description
`minWidth`	`'40' \| '48' \| '56' \| '64'`	`'48'`	Minimum menu width.Web only.

DropdownMenu.Item

Prop	Type	Default	Description
`onSelect`	`() => void`	—	Called when chosen; the menu closes.
`icon`	`ReactNode`	—	Leading icon.
`shortcut`	`string`	—	Keyboard hint on the right.Web only.
`destructive`	`boolean`	—	Style as a dangerous action.
`disabled`	`boolean`	—	Skip this item.
`textValue`	`string`	—	Type-ahead text when children is not a string.

DropdownMenu.CheckboxItem

Prop	Type	Default	Description
`checked`	`boolean`	—	Checked state.
`onCheckedChange`	`(checked: boolean) => void`	—	Called with the new state.

DropdownMenu.RadioGroup

Prop	Type	Default	Description
`value`	`string`	—	Selected item.
`onValueChange`	`(value: string) => void`	—	Called with the chosen value.

DropdownMenu.RadioItem

Prop	Type	Default	Description
`value` required	`string`	—	Item value.

DropdownMenu.Label

A heading for the items after it.

DropdownMenu.Separator

A line between groups of items.

DropdownMenu.Group

Groups items under a Label for screen readers.

Accessibility

Web follows the WAI-ARIA menu button pattern: the trigger has aria-haspopup="menu" and aria-expanded; items are menuitem, menuitemcheckbox or menuitemradio with aria-checked.
Focus moves into the menu when it opens and back to the trigger after a choice or Escape.
Type a letter to jump to the next item that starts with it.
On iOS and Android each row is a single accessible element (menu item, checkbox or radio with its checked state), at least 48pt tall.

Keyboard interactions
Key	Action
`Enter / Space / ↓`	Opens the menu from the trigger and focuses the first item.
`↓ / ↑`	Moves between items (disabled items are skipped).
`Home / End`	First / last item.
`Enter / Space`	Chooses the focused item.
`A–Z`	Type-ahead to an item.
`Esc`	Closes the menu.

Responsive behavior

The menu flips to stay inside the viewport on small screens.

Platform notes

Web

Floating menu next to the trigger with full keyboard support.

iOS

Opens as a bottom sheet of large rows (native menus need a native module that Expo Go does not include). Shortcut hints are hidden.