## Import ```tsx import { Menu } from "@cfa/react-core"; ``` ## Live Editor ```tsx JS Jane Smith Notifications Settings Log Out ``` ## Examples ### Icon Button Trigger You may use any button or clickable element as a trigger, but the IconButton is the most common use case. ```jsx
My Profile Settings Calendar Log Out My Profile Settings Calendar Log Out Edit Delete Edit Delete
``` ### Avatar Trigger You can use the `Avatar` component as a trigger for the menu. This is useful for user profile menus. ```jsx AV JS Jane Smith Notifications Settings Log Out ``` ### Pressable Trigger Alternatively to an IconButton or Avatar, you can use the `Pressable` component to create a trigger that can be styled to your needs. ```jsx Pressable Span with Role Button Cut Copy Paste ``` ### Should Focus Wrap The focus of the menu items will wrap back to the beginning by default, or when `shouldFocusWrap` is true. Set `shouldFocusWrap` on the `` to `false` to disable the circular keyboard navigation. ```jsx Focus Wrap = false Focus Wrap = false Focus Wrap = false ``` ### Menu Item Events You can add events to `Menu.Item` components to handle user interactions like `onAction`, `onHoverStart`, `onHoverEnd`, and `onHoverChange`. ```jsx function MenuItemEventExample() { const [eventMessage, setEventMessage] = React.useState(""); return (

{eventMessage}

Disabled setEventMessage("onAction")} onHoverStart={() => setEventMessage("onHoverStart")} onHoverEnd={() => setEventMessage("onHoverEnd")} onHoverChange={(value) => setEventMessage(`onHoverChange: ${value}`) } > Enabled
); } ``` ### Menu Item Href You can use the `href` prop on `Menu.Item` to create links. ```jsx Internal Link Google ``` ### Menu Item Disabled You can disable a `Menu.Item` by setting the `isDisabled` prop to `true`. ```jsx Enabled Disabled Enabled Enabled ``` ### Divider You can use the `Menu.Divider` component to visually separate menu items. ```jsx Cut Copy Paste ``` ### Section Header The `Menu.Section` component allows you to group menu items under a header. Use the `Menu.Header` component to define the section title. ```jsx Header 1 Copy Paste Header 2 Copi Pasta ``` ## Props ### Menu.Root | Name | Type | Default | Description | | :--- | :--- | :--- | :--- | | defaultOpen | `boolean` | - | Whether the overlay is open by default (uncontrolled). | | isOpen | `boolean` | - | Whether the overlay is open by default (controlled). | | onOpenChange | `(isOpen: boolean) => void` | - | Handler that is called when the overlay's open state changes. | ### Menu.Container | Name | Type | Default | Description | | :--- | :--- | :--- | :--- | | aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. | | aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. | | aria-label | `string` | - | Defines a string value that labels the current element. | | aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. | | autoFocus | `boolean \ | FocusStrategy` | - | Where the focus should be set. | | children | `ReactNode \ | ((item: T) => ReactNode)` | - | The contents of the collection. | | className | `ClassNameOrFunction` | `'react-aria-Menu'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. | | dir | `string` | - | - | | escapeKeyBehavior | `"clearSelection" \ | "none"` | `'clearSelection'` | Whether pressing the escape key should clear selection in the menu or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually. | | hidden | `boolean` | - | - | | id | `string` | - | The element's unique identifier. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/id). | | inert | `boolean` | - | - | | items | `Iterable` | - | Item objects in the collection. | | lang | `string` | - | - | | onAction | `(key: Key) => void` | - | Handler that is called when an item is selected. | | onAnimationEnd | `AnimationEventHandler` | - | - | | onAnimationEndCapture | `AnimationEventHandler` | - | - | | onAnimationIteration | `AnimationEventHandler` | - | - | | onAnimationIterationCapture | `AnimationEventHandler` | - | - | | onAnimationStart | `AnimationEventHandler` | - | - | | onAnimationStartCapture | `AnimationEventHandler` | - | - | | onAuxClick | `MouseEventHandler` | - | - | | onAuxClickCapture | `MouseEventHandler` | - | - | | onClick | `MouseEventHandler` | - | - | | onClickCapture | `MouseEventHandler` | - | - | | onClose | `() => void` | - | Handler that is called when the menu should close after selecting an item. | | onContextMenu | `MouseEventHandler` | - | - | | onContextMenuCapture | `MouseEventHandler` | - | - | | onDoubleClick | `MouseEventHandler` | - | - | | onDoubleClickCapture | `MouseEventHandler` | - | - | | onGotPointerCapture | `PointerEventHandler` | - | - | | onGotPointerCaptureCapture | `PointerEventHandler` | - | - | | onLostPointerCapture | `PointerEventHandler` | - | - | | onLostPointerCaptureCapture | `PointerEventHandler` | - | - | | onMouseDown | `MouseEventHandler` | - | - | | onMouseDownCapture | `MouseEventHandler` | - | - | | onMouseEnter | `MouseEventHandler` | - | - | | onMouseLeave | `MouseEventHandler` | - | - | | onMouseMove | `MouseEventHandler` | - | - | | onMouseMoveCapture | `MouseEventHandler` | - | - | | onMouseOut | `MouseEventHandler` | - | - | | onMouseOutCapture | `MouseEventHandler` | - | - | | onMouseOver | `MouseEventHandler` | - | - | | onMouseOverCapture | `MouseEventHandler` | - | - | | onMouseUp | `MouseEventHandler` | - | - | | onMouseUpCapture | `MouseEventHandler` | - | - | | onPointerCancel | `PointerEventHandler` | - | - | | onPointerCancelCapture | `PointerEventHandler` | - | - | | onPointerDown | `PointerEventHandler` | - | - | | onPointerDownCapture | `PointerEventHandler` | - | - | | onPointerEnter | `PointerEventHandler` | - | - | | onPointerLeave | `PointerEventHandler` | - | - | | onPointerMove | `PointerEventHandler` | - | - | | onPointerMoveCapture | `PointerEventHandler` | - | - | | onPointerOut | `PointerEventHandler` | - | - | | onPointerOutCapture | `PointerEventHandler` | - | - | | onPointerOver | `PointerEventHandler` | - | - | | onPointerOverCapture | `PointerEventHandler` | - | - | | onPointerUp | `PointerEventHandler` | - | - | | onPointerUpCapture | `PointerEventHandler` | - | - | | onScroll | `UIEventHandler` | - | - | | onScrollCapture | `UIEventHandler` | - | - | | onTouchCancel | `TouchEventHandler` | - | - | | onTouchCancelCapture | `TouchEventHandler` | - | - | | onTouchEnd | `TouchEventHandler` | - | - | | onTouchEndCapture | `TouchEventHandler` | - | - | | onTouchMove | `TouchEventHandler` | - | - | | onTouchMoveCapture | `TouchEventHandler` | - | - | | onTouchStart | `TouchEventHandler` | - | - | | onTouchStartCapture | `TouchEventHandler` | - | - | | onTransitionCancel | `TransitionEventHandler` | - | - | | onTransitionCancelCapture | `TransitionEventHandler` | - | - | | onTransitionEnd | `TransitionEventHandler` | - | - | | onTransitionEndCapture | `TransitionEventHandler` | - | - | | onTransitionRun | `TransitionEventHandler` | - | - | | onTransitionRunCapture | `TransitionEventHandler` | - | - | | onTransitionStart | `TransitionEventHandler` | - | - | | onTransitionStartCapture | `TransitionEventHandler` | - | - | | onWheel | `WheelEventHandler` | - | - | | onWheelCapture | `WheelEventHandler` | - | - | | render | `DOMRenderFunction<"div", MenuRenderProps>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: \* You must render the expected element type (e.g. if \`\