# Menu **An accessible dropdown and context menu that displays a list of actions or options.** **Reference:** [View Source](https://github.com/jramke/fluid-primitives/tree/main/Resources/Private/Primitives/Menu) · [Zag.js Docs](https://zagjs.com/components/react/menu) **Menu.html** ```html Open Menu New File New Window Settings ``` **Menu.ts** ```ts import { mountAll } from 'fluid-primitives'; import { Menu } from 'fluid-primitives/menu'; mountAll('ui:menu', ({ props }) => { const menu = new Menu(props); menu.init(); return menu; }); ``` ## Features - Support for items, labels, and groups of items - Support for checkbox and radio menu items - Support for nested/submenu patterns - Support for context menus (triggered by right-click) and multiple independent triggers sharing one menu - Focus is fully managed using the `aria-activedescendant` pattern - Typeahead to allow focusing items by typing text - Full keyboard navigation support, including arrow keys, home/end, and submenu navigation ## Installation ```bash typo3 ui:add menu ``` Or copy the files manually from GitHub (https://github.com/jramke/fluid-primitives.com/tree/main/packages/docs/Resources/Private/Registry/Menu) into your project. Read more about installing [Components and Primitives](/docs/core-concepts/primitives.md). ## Examples ### Grouping Organize items into logical groups with their own labels. **Menu.html** ```html File File New Open Save Edit Undo Redo ``` ### With Links Pass `asChild="{true}"` on `menu.item` to render the item's attributes and behavior directly onto a single child element, like a plain ``, so it behaves like real navigation, including keyboard activation. **Menu.html** ```html Navigate Home Documentation GitHub ``` ### With Checkboxes Use `menu.checkboxItem` for items that toggle independently of each other. **Menu.html** ```html View Show Toolbar Show Sidebar Show Status Bar ``` ### With Radios Use `menu.radioItem` with a shared `name` for mutually exclusive options. **Menu.html** ```html Sort By Name Date Modified Size ``` ### Nested Menu A submenu is just another `menu.root`, linked to its parent by two explicit ids: give the submenu's `menu.root` a `rootId` and point its `parentId` back at the parent menu's own `rootId`, then render a `menu.triggerItem` inside the _parent's_ own content with a `childId` matching the submenu's `rootId`. The submenu itself doesn't need to live anywhere near the parent's markup - it's linked entirely by id. **Menu.html** ```html File New Tab New Window Share Export Print… Email Messages AirDrop PDF PNG SVG ``` ### Context Menu Use `menu.contextTrigger` to open the menu on right-click instead of (or in addition to) a regular trigger. **Menu.html** ```html Right-click this area Cut Copy Paste ``` ### Multiple Triggers Give several `menu.trigger` elements different `value`s to share a single menu instance between them. **Menu.html** ```html
Trigger A Trigger B
Edit Duplicate Delete ``` ### Inside a Dialog By default `menu.content` portals to the end of the document body, same as Select. Pass `portalled="{false}"` when nesting a menu inside another portalled/focus-trapped element, like a dialog, so it stays within that element's DOM subtree instead. **Menu.html** ```html Open Dialog Project Settings The menu below sets portalled="{false}" on ui:menu.content so it stays inside this dialog's DOM subtree instead of portalling to the document body. Options Rename Duplicate Archive Close ``` ## API Reference ### menu.root Provides shared menu state to the rest of the parts. Renders no element of its own. | Name | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `closeOnSelect` | `boolean` | No | `true` | Whether to close the menu when an option is selected. | | `composite` | `boolean` | No | `true` | Whether the menu is composed with other composite widgets like a combobox or tabs. | | `typeahead` | `boolean` | No | `true` | Whether pressing printable characters should trigger typeahead navigation. | | `loopFocus` | `boolean` | No | `false` | Whether to loop the keyboard navigation. | | `positioning` | `array` | No | `{ "placement": "bottom-start", "gutter": 8 }` | The options used to dynamically position the menu. | | `defaultOpen` | `boolean` | No | `false` | The initial open state of the menu when rendered. Use when you don't need to control the open state of the menu. | | `defaultHighlightedValue` | `string` | No | `-` | The initial highlighted value of the menu item when rendered. | | `defaultTriggerValue` | `string` | No | `-` | The initial trigger value when rendered, for a menu with multiple triggers. | | `ariaLabel` | `string` | No | `-` | The accessibility label for the menu. Forwarded to the machine as `aria-label`. | | `parentId` | `string` | No | `-` | The `rootId` of the parent menu this menu is a submenu of. Must match a `menu.triggerItem`'s `childId` on that parent, pointing back at this menu's own `rootId` - see the Nested Menu docs example. | | `rootId` | `string` | No | `-` | The root ID of the component, used for hydration and identification. | | `ids` | `array` | No | `[]` | The IDs of of the component parts for composition. | | `controlled` | `boolean` | No | `false` | If true, the component is meant to be initialized manually inside another component | ### menu.trigger Opens and closes the menu. Renders a `