);
}
export default App;
```
## Options
The Menu supports an action mode and two persisted selection modes, leading icons, disabled options, and either edge of its trigger for the popover.
### Selection Mode
`selectionMode` switches the menu between three behaviors: `"none"` (the default) is a plain action menu; `"single"` and `"multiple"` persist a checked selection instead of closing on pick.
#### Single Select
```tsx lines theme={null}
import { Button, Menu } from "@servicetitan/carto-react-kit";
function App() {
return (
);
}
export default App;
```
`selectionMode="single"` behaves like a "sort by" control: picking an option checks it, unchecks any other, and closes the menu to confirm the single choice.
#### Multi Select
```tsx lines theme={null}
import { Button, Menu } from "@servicetitan/carto-react-kit";
function App() {
return (
);
}
export default App;
```
`selectionMode="multiple"` lets several options stay checked at once, and the menu stays open after a pick so more can be toggled.
### Action Menu
The hero example above is an action menu — `selectionMode`'s default, `"none"`. Each option runs a command via `onAction` and the menu closes immediately on pick. Action menus and the selection modes render identically at rest; the difference is entirely behavioral — whether picking an option persists a checked state or fires a one-off command.
### Icons
```tsx lines theme={null}
import { Button, Menu } from "@servicetitan/carto-react-kit";
import {
IconCopy,
IconInbox,
IconPencil,
} from "@servicetitan/carto-react-kit/icons";
function App() {
return (
);
}
export default App;
```
An optional leading icon renders at 16px before the label. Icons are decorative and don't contribute to the option's accessible name.
### Disabled Options
```tsx lines theme={null}
import { Button, Menu } from "@servicetitan/carto-react-kit";
function App() {
return (
);
}
export default App;
```
A disabled option can't be focused, selected, or activated, and renders dimmed — including an option that is already selected; the dimmed check still shows its state.
### Placement
```tsx lines theme={null}
import { Button, Menu } from "@servicetitan/carto-react-kit";
function App() {
return (
);
}
export default App;
```
`placement` opens the popover on the `"bottom"` (default, shown in the hero example above) or `"top"` edge of the trigger, with the same 4px gap either way.
## Behavior
The popover hugs its content between a 180px floor and a 360px ceiling, and every option responds to hover, focus, press, and disabled states.
### Visual States
```tsx lines theme={null}
import { Button, Menu } from "@servicetitan/carto-react-kit";
function App() {
return (
);
}
export default App;
```
Unselected options stay neutral — a subtle gray fill on hover and press, with unchanged text. Selected options use the informative-blue family instead. Keyboard focus draws a ring only, with no background fill. Disabled options render dimmed regardless of selection.
### Wrapping
```tsx lines theme={null}
import { Button, Menu } from "@servicetitan/carto-react-kit";
function App() {
return (
}
items={[
{ id: "short", label: "Rename" },
{
id: "long",
label:
"Move this item to a different project workspace and notify collaborators",
},
{ id: "delete", label: "Delete" },
]}
defaultOpen
/>
);
}
export default App;
```
Labels wrap to multiple lines once the popover reaches its 360px max-width, rather than growing the popover without bound.
### Scrolling List
```tsx lines theme={null}
import { Button, Menu } from "@servicetitan/carto-react-kit";
function App() {
return (
);
}
export default App;
```
Enough options to exceed the popover's available height scroll internally; the scroll region shares the popover's corner radius so its scrollbar stays clipped to the rounded shape.
## Keyboard Interaction
Users can open, navigate, and act on the Menu using standard keyboard controls.
| Key | Description |
| -------------------------- | ------------------------------------------------------------------- |
| Enter / Space / Down Arrow | Opens the menu from the trigger, focusing the first option |
| Up / Down Arrow | Moves focus between options |
| Typeahead | Jumps focus to the next option starting with the typed character(s) |
| Enter / Space | Activates or toggles the focused option |
| Escape | Closes the menu and returns focus to the trigger |
