Menu

Code

Install

Import

The axes

• mode takes inline, vertical and horizontal, and defaults to vertical. It decides where a submenu goes: expanded in place under its parent (inline), opened as a popup to the side (vertical), or opened below a row that also collects the items that do not fit (horizontal).
• theme takes light (the default) and dark. It sets how loud the menu is, whatever the page's light or dark mode, so a dark sidebar on a light page works as expected. A submenu entry takes its own theme too, for a popup that differs from the rest.
• direction cannot be set on one menu. A value passed here is overwritten by the provider's, so set it on ConfigProvider, where it also flips which arrow key moves into a submenu.

Flags

• selectable defaults to true. Setting it false turns the menu into an actions list: onClick still fires and nothing stays highlighted.
• multiple lets more than one key stay selected at once. It is off by default, and it is the flag that makes onDeselect reachable at all.
• inlineCollapsed shrinks an inline menu to its icons. It only works with mode="inline". Leave it unset inside a Layout.Sider: the Sider collapses the menu for you, and setting both stops the menu following the Sider.
• disabled disables every item at once, which also takes the whole menu out of arrow-key reach. Prefer leaving items enabled and explaining at the destination.
• disabledOverflow keeps every item in the row, so nothing moves into the trailing submenu. It only applies to mode="horizontal".
• forceSubMenuRender mounts every submenu on first paint instead of on first open. Use it when something inside a closed submenu has to exist, like a form field that must submit.

Slots

• overflowedIndicator is the title of the trailing submenu that holds the items a horizontal menu has no room for. The kit fills it with your icon pack's more icon. Pass your own node to replace it, or null for none. Put a word in what you pass, because an icon alone has no name for a screen reader.
• expandIcon replaces the submenu arrow. The default arrow is drawn with CSS, not an icon, so it stays the same when you change the icon pack. Pass an Icon here if you want one.
• itemIcon renders after every item's content, for a trailing marker. The leading icon is the icon key on each items entry. Pass an <Icon> there so it follows the icon pack.
• popupRender wraps or replaces a submenu's popup, for a mega menu or any panel that is more than a list.
• getPopupContainer decides where that portal is mounted. Point it at a scrolling ancestor so an open popup travels with the menu instead of staying put.

Events

• onSelect
• onDeselect
• onClick
• onOpenChange

Styling