# Menu
_Box Kite 2.1.0 · a markdown copy of https://www.box-kite.dev/menu/_
A menu button and its menu, on the platform's own Popover API: the top layer, light dismiss and focus return are the browser's, and a submenu is a popover nested inside its menu.
**Import**
```jsx
import Menu from '@box-kite/react/components/menu';
```
**Usage**
```jsx
```
## What the platform does, so this does not
A menu is a floating layer with a keyboard on it. The layer half is the browser's — this component is the Popover API plus APG's roles and keys, and every other library's portal, focus trap and `z-index` strategy is simply absent:
The top layer, and no portal
The menu paints above every stacking context and outside every clipped ancestor, while staying where it was declared — so it inherits the theme, the custom properties and the text direction around it, and the tab order runs trigger → menu with nothing to arrange.
Light dismiss, one layer per press
Escape and a press outside are the browser's, and Escape closes the _innermost_ menu first: a submenu, then the menu it came out of. Choosing an item closes the lot, which is the component's own doing.
A submenu is a nested popover
Its panel is declared beside its item, inside the menu it belongs to, which is what makes the two nest: opening a submenu leaves its parent open, a press inside it is a press inside the parent, and closing the menu closes every submenu with it.
What is left is the half APG asks for
The roles, `aria-checked`, the arrow keys, Home and End, typeahead, and the two focus moves the platform does not make: into the first item on open, and back onto a submenu's item when that submenu closes — the browser returns focus for the outermost layer only.
## The items a menu owns
A command is a `Menu.Item`; the two that carry a state are `Menu.CheckboxItem` and `Menu.RadioItem` inside a `Menu.RadioGroup`. A `Menu.Group` is a titled section — its `label` names the group through `aria-labelledby`, so the items are read as a set — and a `Menu.Separator` is the line between two of them.
A state does not close the menu, a command does
`Menu.Item` closes on select, because choosing a command is the end of the visit. A checkbox or a radio item does not, so several boxes can be ticked in one go — `closeOnSelect` is the prop that swaps either default.
```jsx
```
## A disabled item is aria-disabled, and stays focusable
APG asks that a disabled menu item stay reachable, so that a keyboard user finds out it is there at all. The `disabled` prop therefore writes `aria-disabled` rather than the attribute, which would take the item out of the keyboard's reach and silence it: the arrows still land on it, the item announces itself as unavailable, and activating it does nothing.
## Submenus, and the arrow that opens them
`Menu.Sub` renders its own item — the label, the chevron, `aria-haspopup="menu"` and `aria-expanded` — and the menu beside it. It opens on the arrow pointing the way the text runs, on Enter or Space, and on hover; it closes on the arrow pointing back, on Escape, and whenever focus lands on another item, which is what makes hovering across the menu behave.
In a right-to-left menu the two arrows swap, because the key is the _reading order_ rather than the letter on it — and the chevron turns round with them, from one `rtl` rule in the style tree.
```jsx
```
## Controlled, and the reason it changed
Leave `open` out and the menu owns its state. Pass it and you own it, with the asymmetry the platform imposes: a close cannot be refused, because the browser has already done it by the time `onOpenChange` runs.
Every change names its reason. `select` is an item being chosen — the one a consumer most often wants to tell apart — beside `trigger`, `escape`, `outside-pointer`, `tab` and `imperative`.
Last reason: `—`
## The menu is always rendered
Closed means `display: none`, not unmounted — the same shape as `` and `