Skip to content
Alea0.1

Navigation

Menu

A list of actions or choices from a button: sections, shortcuts, submenus and checkable items.

Ant Design: Dropdown, Menu

import { DropdownMenu, MenuItem, MenuSection, MenuSeparator, Submenu } from '@alea/ui';

Examples

Actions

Sections, shortcuts, a danger item at the end.

Selectable

selectionMode turns items into a single or multiple choice.

Props

DropdownMenu props

A button that opens a menu (Ant's Dropdown).

PropTypeDefaultDescription
triggerrequiredReactNode-The button that opens it (usually a Button or IconButton).
aria-labelstring-Name of the menu; defaults to the trigger's name.
menuPropsOmit<MenuProps<T>, "children">-Menu props: onAction, selectionMode, selectedKeys, items, disabledKeys...
placement"start" | "end" | "bottom" | "top" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top left" | "top right" | "top start" | "top end" | "l…'bottom start'Where it opens. Default bottom start.

MenuItem props

One item: an action, a link (href), or a choice in a selectable menu.

PropTypeDefaultDescription
descriptionReactNode-A second line under the label.
iconReactNode-Icon before the label.
shortcutstring-A shortcut shown on the right, e.g. ⌘D. Display only: wire the keys yourself.
tone"danger" | "default"'default'danger turns it red, for destructive actions.

MenuSection props

PropTypeDefaultDescription
childrenrequiredReactNode-The MenuItems.
titleReactNode-The group heading.

Submenu props

An item that opens another menu (arrow right or hover).

PropTypeDefaultDescription
labelrequiredReactNode-The item that opens the submenu.
iconReactNode-An icon before the item label.

Menu props

A list of actions or choices. Arrow keys move, typing jumps, Enter picks.

PropTypeDefaultDescription
aria-labelstring-Defines a string value that labels the current element. (React Aria)
autoFocusboolean | FocusStrategy-Where the focus should be set. (React Aria)
childrenReactNode | ((item: T) => ReactNode)-The contents of the collection. (React Aria)
classNameClassNameOrFunction<MenuRenderProps>-The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. (React Aria)
defaultSelectedKeysIterable<Key> | "all"-The initial selected keys in the collection (uncontrolled). (React Aria)
disabledKeysIterable<Key>-The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. (React Aria)
idstring-The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). (React Aria)
onSelectionChange((keys: Selection) => void)-Handler that is called when the selection changes. (React Aria)
selectedKeysIterable<Key> | "all"-The currently selected keys in the collection (controlled). (React Aria)
selectionMode"single" | "multiple" | "none"-The type of selection that is allowed in the collection. (React Aria)
styleStyleOrFunction<DisclosureGroupRenderProps>-The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. (React Aria)

Accessibility

  • A menu named by its trigger; items are menuitem, menuitemradio or menuitemcheckbox.
  • Typing jumps to items; focus returns to the trigger on close.

Keyboard

KeyDoes
Enter, Space, Arrow DownOpens the menu
Arrow keysMove between items
Arrow Right / LeftOpen / close a submenu
EscapeCloses
LettersJump to an item

Do and don't

Do

  • Put destructive items last, with tone="danger".

Don't

  • Don't hide the main action in a menu.
  • Don't use a menu to pick a form value: use Select.
Select CommandPalette IconButton
Tested with axe, keyboard and screen reader roles