ActionMenu

ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.

size

align

direction

menuSize

isQuiet

isDisabled

import {ActionMenu, MenuItem, Text, Keyboard} from '@react-spectrum/s2';
import Copy from '@react-spectrum/s2/icons/Copy';
import Cut from '@react-spectrum/s2/icons/Cut';
import Paste from '@react-spectrum/s2/icons/Paste';

<ActionMenu>
  <MenuItem
    textValue="Copy"
    onAction={() => alert('copy')}>
    <Copy />
    <Text slot="label">Copy</Text>
    <Text slot="description">Copy the selected text</Text>
    <Keyboard>⌘C</Keyboard>
  </MenuItem>
  <MenuItem
    textValue="Cut"
    onAction={() => alert('cut')}>
    <Cut />
    <Text slot="label">Cut</Text>
    <Text slot="description">Cut the selected text</Text>
    <Keyboard>⌘X</Keyboard>
  </MenuItem>
  <MenuItem
    textValue="Paste"
    onAction={() => alert('paste')}>
    <Paste />
    <Text slot="label">Paste</Text>
    <Text slot="description">Paste the copied text</Text>
    <Keyboard>⌘V</Keyboard>
  </MenuItem>
</ActionMenu>

API

<ActionMenu>
  <MenuItem />
</ActionMenu>

ActionMenu

Name	Type	Default
`menuSize`	`'S' \| 'M' \| 'L' \| 'XL'`	Default: —
`isDisabled`	`boolean`	Default: —
Whether the button is disabled.
`size`	`'XS' \| 'S' \| 'M' \| 'L' \| 'XL'`	Default: `'M'`
The size of the ActionButton.
`isQuiet`	`boolean`	Default: —
Whether the button should be displayed with a quiet style.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.

`children`	`ReactNode \| (item: T) => ReactNode`	Default: —
The contents of the collection.
`items`	`Iterable<T>`	Default: —
Item objects in the collection.

`disabledKeys`	`Iterable<Key>`	Default: —
The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.