<Menu
                trigger={<Button>Open Menu</Button>}
                activation="click"
                aria-label="View options"
                items={[
                  { type: "label", label: "File" },
                  {
                    label: "Rename",
                    icon: <FaEdit />,
                    shortcut: "Enter",
                    onClick: () => alert("Rename"),
                  },
                  {
                    label: "Duplicate",
                    icon: <FaCopy />,
                    shortcut: "Ctrl+D",
                    onClick: () => alert("Duplicate"),
                  },
                  { type: "separator" },
                  {
                    label: "Move to",
                    icon: <FaFolderOpen />,
                    submenuAriaLabel: "Move destinations",
                    items: [
                      { label: "Backlog", onClick: () => alert("Backlog") },
                      { label: "In review", onClick: () => alert("In review") },
                      {
                        label: "Archive",
                        items: [
                          {
                            label: "This month",
                            onClick: () => alert("This month"),
                          },
                          { label: "All time", onClick: () => alert("All time") },
                        ],
                      },
                    ],
                  },
                  { type: "separator" },
                  {
                    label: "Delete",
                    icon: <FaTrash />,
                    destructive: true,
                    onClick: () => alert("Delete"),
                  },
                ]}
              ></Menu>

Props API

Menu props API
				Default	Description
`activation`	`MenuActivation`	No	props	`trigger ? "click" : "contextmenu"`	How the menu opens. Defaults to "click" when `trigger` is provided, otherwise "contextmenu".
`aria-describedby`	`string`	No	aria	`—`	Accessible description id(s) for the menu panel.
`aria-label`	`string`	No	aria	`"Context menu"`	Accessible label for the menu panel.
`aria-labelledby`	`string`	No	aria	`—`	Accessible labelledby target for the menu panel.
`children`	`ReactNode`	No	props	`—`	Context target content. Used when opening by click or context menu.
`className`	`string`	No	styling	`—`	Optional class name for the outer wrapper.
`closeOnSelect`	`boolean`	No	props	`true`	Whether the menu closes after selecting a non-submenu item.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`defaultOpen`	`boolean`	No	props	`false`	Initial open state for uncontrolled usage.
`focusFirstItemOnOpen`	`boolean`	No	props	`true`	Whether focus moves to the first enabled item when the menu opens.
`id`	`string`	No	props	`—`	Optional id for the outer wrapper.
`itemClassName`	`string`	No	props	`—`	Optional class name merged onto every actionable menu item.

Menu

Usage & Examples

Default

Props API