DropdownMenu

DropdownMenu — меню, открывающееся кликом по своему триггеру. Триггер задаёт потребитель через trigger — это любой элемент (кнопка, иконка), на который Ark через asChild вешает onClick и aria-атрибуты. Пункты описываются массивом items — тем же, что у ContextMenu: элемент либо { separator: true } (разделитель групп), либо пункт с обязательными value и label плюс icon, variant (danger для разрушающих действий), disabled и вложенный items (подменю). Состояния открытия у компонента нет — потребитель получает только onSelect(value) и ветвится по значению выбранного пункта; в IDE пункты обычно зовут команды реестра. Меню порталится в body и монтируется лениво при открытии. Родня: ContextMenu — то же меню, но открывается правым кликом по области; MenuItemButton — одиночный пункт того же вида вне меню (например, в popover крошек или в сайдбаре).

Анатомия

DropdownMenu
Trigger (trigger, asChild)
Portal → Positioner → Content
Item (icon | label | variant | disabled)
Separator
TriggerItem → вложенный Content

Примеры

Подменю

Пункт с собственным items становится триггером вложенного меню: оно раскрывается по наведению, а его value приходят в тот же onSelect. У самого пункта-триггера value используется только как ключ — выбрать его нельзя.

Триггер

Триггером служит любой элемент — не только кнопка с текстом. Здесь это ButtonIcon: Ark клонирует на переданный элемент обработчик открытия и aria через asChild, поэтому годится всё, что пробрасывает пропсы на свой корневой узел.

API

PropTypeDefault
items*

Пункты меню — тот же массив, что у ContextMenu: элемент либо разделитель { separator: true }, либо пункт с value и label (плюс icon, variant, disabled, вложенный items — подменю)

MenuItem[]-
onSelect*

Вызывается при выборе пункта со значением value этого пункта

(value: string) => void-
trigger*

Элемент-триггер, открывающий меню по клику, — задаётся потребителем (кнопка, иконка и т.п.). Ark навешивает на него onClick/aria через asChild.

ReactElement-