# Menu A menu displays a list of actions or options that a user can choose. ## Content `Menu` follows the [Collection Components API](collections.html?component=Menu), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a function to render the children. ```tsx import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Popover} from 'vanilla-starter/Popover'; import {Button} from 'vanilla-starter/Button'; function Example() { let items = [ { id: 1, name: 'New file…' }, { id: 2, name: 'New window' }, { id: 3, name: 'Open…' }, { id: 4, name: 'Save' }, { id: 5, name: 'Save as…' }, { id: 6, name: 'Revert file' }, { id: 7, name: 'Print…' }, { id: 8, name: 'Close window' }, { id: 9, name: 'Quit' } ]; return ( {/*- begin highlight -*/} {(item) => {item.name}} {/*- end highlight -*/} ); } ``` ### Text slots Use the `"label"` and `"description"` slots to separate primary and secondary content within a ``. This improves screen reader announcements and can also be used for styling purposes. Use the `` component to display a keyboard shortcut. ```tsx import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Text, Keyboard} from 'react-aria-components'; import {Popover} from 'vanilla-starter/Popover'; import {Button} from 'vanilla-starter/Button'; {/*- begin highlight -*/} Copy Copy the selected text {/*- end highlight -*/} ⌘C Cut Cut the selected text ⌘X Paste Paste the copied text ⌘V ``` Accessibility Interactive elements (e.g. buttons) within menu items are not allowed. This will break keyboard and screen reader navigation. Only add textual or decorative graphics (e.g. icons or images) as children. ### Sections Use the `` component to group options. A `
` element may also be included to label the section. Sections without a header must have an `aria-label`. ```tsx import {Header} from 'react-aria-components'; import {MenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu'; import {Popover} from 'vanilla-starter/Popover'; import {Button} from 'vanilla-starter/Button'; {/*- begin highlight -*/}
Export
{/*- end highlight -*/} Image… Video… Text…
Share
YouTube… Instagram… Email… ``` ### Submenus Wrap a `` and a `` with a `` to create a submenu. ```tsx import {MenuTrigger, SubmenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu'; import {Popover} from 'vanilla-starter/Popover'; import {Button} from 'vanilla-starter/Button'; Cut Copy Delete {/*- begin highlight -*/} Share {/*- end highlight -*/} SMS Instagram Email Work Personal ``` ### Separators Separators may be added between menu items or sections in order to create non-labeled groupings. ```tsx import {MenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu'; import {Separator} from 'react-aria-components'; import {Popover} from 'vanilla-starter/Popover'; import {Button} from 'vanilla-starter/Button'; New… Open… {/*- begin highlight -*/} {/*- end highlight -*/} Save Save as… Rename… Page setup… Print… ``` ### Links Use the `href` prop on a `` to create a link. See the **client side routing guide** to learn how to integrate with your framework. ```tsx import {MenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu'; import {Popover} from 'vanilla-starter/Popover'; import {Button} from 'vanilla-starter/Button'; {/*- begin highlight -*/} Adobe {/*- end highlight -*/} Apple Google Microsoft ``` ### Autocomplete Popovers can include additional components as siblings of a menu. This example uses an [Autocomplete](Autocomplete.html) with a [SearchField](SearchField.html) to let the user filter the items. ```tsx import {Autocomplete, useFilter} from 'react-aria-components'; import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; import {Popover} from 'vanilla-starter/Popover'; import {SearchField} from 'vanilla-starter/SearchField'; function Example() { let {contains} = useFilter({sensitivity: 'base'}); return ( {/*- begin highlight -*/} {/*- end highlight -*/} News Travel Shopping Business Entertainment Food Technology Health Science ); } ``` ## Selection Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection.html?component=Menu) for more details. ```tsx import type {Selection} from 'react-aria-components'; import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; import {Popover} from 'vanilla-starter/Popover'; import {useState} from 'react'; function Example(props) { let [selected, setSelected] = useState(new Set(['rulers'])); return ( <> Pixel grid Rulers Comments Layout guides Toolbar

Current selection: {selected === 'all' ? 'all' : [...selected].join(', ')}

); } ``` ### Section-level selection Each section in a menu may have independent selection states by passing `selectionMode` and `selectedKeys` to the `MenuSection`. ```tsx import type {Selection} from 'react-aria-components'; import {Header} from 'react-aria-components'; import {MenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; import {Popover} from 'vanilla-starter/Popover'; import {useState} from 'react'; function Example() { let [style, setStyle] = useState(new Set(['bold'])); let [align, setAlign] = useState(new Set(['left'])); return (
Clipboard
Cut Copy Paste {/*- begin highlight -*/} {/*- end highlight -*/}
Text style
Bold Italic Underline
Text alignment
Left Center Right ); } ``` ## Menu trigger ### Custom trigger `MenuTrigger` works with any pressable React Aria component (e.g. [Button](Button.html), [Link](Link.html), etc.). Use the `` component or [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) hook to wrap a custom trigger element such as a third party component or DOM element. ```tsx import {Pressable} from 'react-aria-components'; import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; import {Popover} from 'vanilla-starter/Popover'; {/*- begin highlight -*/} Custom trigger {/*- end highlight -*/} Open Rename… Duplicate Delete… ``` Accessibility Any `` child must have an [interactive ARIA role](https://www.w3.org/TR/wai-aria-1.2/#widget_roles) or use an appropriate semantic HTML element so that screen readers can announce the trigger. Trigger components must forward their `ref` and spread all props to a DOM element. ```tsx const CustomTrigger = React.forwardRef((props, ref) => ( Rotate Slice Clone stamp ``` ## Examples ## API ```tsx