OverflowMenu
Kebab icon button revealing a menu of row-level actions
Category: overlay · WCAG 2.2-AA · overlay, menu, actions, kebab, table
Sizes
- sm
- md
States
- closed
- open
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { label: string; value: string; icon?: ReactNode; disabled?: boolean; destructive?: boolean }[] | — | The items to render. |
onSelect | (value: string) => void | — | Called with the selected value. |
placement | 'bottom-start' | 'bottom-end' | bottom-end | Which trigger edge the menu aligns to. `bottom-end` hangs it from the trigger's end edge (right in LTR), `bottom-start` from its start edge. |
label | string | — | Alias of `ariaLabel` — the same invisible accessible name under the other spelling. Neither is deprecated. |
ariaLabel | string | More actions | Accessible label for the component. |
size | 'sm' | 'md' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
tabIndex | number | — | Tab-order position of the trigger. Composite widgets that manage their own focus (a DataTable in grid keyboard mode) pass -1 so the menu is reachable by Enter on its cell without being an extra Tab stop. |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-text--cascivo-color-text-muted--cascivo-color-bg-subtle--cascivo-color-destructive--cascivo-color-destructive-subtle--cascivo-radius-button--cascivo-focus-ring
When to use
- Collapsing secondary row-level or item-level actions behind a kebab trigger in dense layouts like tables and lists
- Offering a small set of actions where a destructive option needs visual distinction
When not to use
- A primary action that should always be visible — use Button
- Selecting a single value from a set rather than triggering actions — use Select or Dropdown
- New code — this component is deprecated in favor of Menu
How to build an accessible OverflowMenu in React →
Examples
Row actions
<OverflowMenu items={[{ label: "Edit", value: "edit" }, { label: "Delete", value: "delete", destructive: true }]} onSelect={handle} />Small, start-aligned
<OverflowMenu size="sm" placement="bottom-start" items={items} />