--- title: Menu description: A list of actions opened from a trigger. --- > LoamUI documentation, generated from the same source as the live page — > treat it as authoritative for `@loamui/core`. # Menu A list of actions opened from a trigger: the APG menu-button pattern on top of the browser's top layer and anchor positioning. ## Import ```tsx import { Menu } from "@loamui/core"; ``` ## Usage ### Basic usage Compose the menu from parts and wire each item's onClick to its action. The popup uses the same engine as Popover (native popover attribute and anchor positioning where supported, a wrapper-anchored fallback elsewhere) with the APG menu-button keyboard pattern on top: arrow keys rove focus, typing jumps to a matching item, and activating one closes the menu and returns focus to the trigger. ```tsx Options {}}>Rename {}}>Duplicate {}}>Move to folder… ``` ### Groups and separators Group related items under a label; Menu.Separator is a real

. Contextual meaning is a custom property: declare --loam-context: danger on the group and the items inside adopt the danger accent, no props involved. ```tsx Workspace {}}>Rename Duplicate Danger zone Delete workspace ``` ### Links as items An Item with href renders as a real , so right-click and open-in-new-tab work. Use sparingly: menus are for actions, and destinations usually deserve visible links. ```tsx Project {}}>Rename Settings Export… ``` ### Disabled items Disabled items use aria-disabled, so they stay visible to assistive technology but are skipped by roving focus and cannot be activated. ```tsx Document Edit Publish (needs review) Share ``` ## When to use it - For a short list of actions on an object (rename, duplicate, export, delete) collapsed behind a single trigger. - When the actions are secondary enough that laying them all out as visible buttons would clutter the surface. ## When not to - For choosing a value that persists, use Select, which has real selection semantics the menu role does not promise. - For navigation, prefer visible links; a menu hides destinations users need behind an extra interaction. - For one or two actions: plain Buttons are simpler and one click fewer. ## How it works ### Commands, with one exception for links Menu items carry role="menuitem", announced as commands, not destinations. When one entry genuinely navigates (Export as CSV, View profile), give the Item an href: it renders a real inside the menu, so right-click and open-in-new-tab keep working. A menu that is mostly links, though, is navigation: use visible links instead. ### Disabled items stay in the menu A disabled item renders aria-disabled and is skipped by roving focus but stays visible and announced: the user learns the command exists and is currently unavailable. Removing it instead teaches them the feature is gone. ### Destructive commands live in a labelled danger group Put Delete and its kin in a Menu.Group with a GroupLabel, inside a --loam-context: danger wrapper. The separation and the colour both signal the stakes before the click, and the group label is announced with each item. ### Icon-only triggers need a name The ⋯ trigger reads as "menu" to a sighted user and as nothing to anyone else. Give it an aria-label naming the object it operates on ("Actions for INV-1024", not "menu"), because in a list of rows, ten triggers labelled "menu" are indistinguishable. ## Accessibility - Implements the APG menu-button pattern: ArrowDown/ArrowUp on the trigger open the menu and focus the first/last item; inside, arrow keys rove focus through the items (looping), Home/End jump to the ends, and typing jumps to the next item matching the query. - Escape closes and returns focus to the trigger, as does activating an item; Tab closes the menu and lets focus continue naturally: the menu moves focus, it never traps it. - The trigger is a real