Menu
Overlay action menu for commands such as edit, copy, archive, and delete.
Menu composes a panel, trigger directive, menu items, headers, and separators.
import {
KuiButtonDirective,
KuiMenuComponent,
KuiMenuForDirective,
KuiMenuHeaderDirective,
KuiMenuItemDirective,
KuiSeparatorDirective,
} from '@kikita-labs/ui';Use menu for actions, not value selection. Use Select or Dropdown for picking values.
<div class="basic-menu-example">
<button kuiButton type="button" [kuiMenuFor]="actionsMenu">Actions</button>
<kui-menu #actionsMenu ariaLabel="Project actions">
<button type="button" kuiMenuItem>
<span class="kui-menu-item__label">Edit</span>
</button>
<button type="button" kuiMenuItem>
<span class="kui-menu-item__label">Copy</span>
</button>
<hr kuiSeparator spacing="xs" />
<button type="button" kuiMenuItem appearance="destructive">
<span class="kui-menu-item__label">Delete</span>
</button>
</kui-menu>
</div>Headers, icons, shortcuts, disabled states, and destructive actions are projected item content.
<div class="menu-content-example">
<button kuiButton type="button" shape="outline" [kuiMenuFor]="rowMenu">Row actions</button>
<kui-menu #rowMenu ariaLabel="Row actions" menuAlign="end" minWidth="220px">
<div kuiMenuHeader>Project</div>
<button type="button" kuiMenuItem>
<span class="kui-menu-item__icon" aria-hidden="true">E</span>
<span class="kui-menu-item__label">Rename</span>
<span class="kui-menu-item__shortcut">F2</span>
</button>
<button type="button" kuiMenuItem>
<span class="kui-menu-item__icon" aria-hidden="true">C</span>
<span class="kui-menu-item__label">Copy link</span>
<span class="kui-menu-item__shortcut">Ctrl C</span>
</button>
<hr kuiSeparator spacing="xs" />
<button type="button" kuiMenuItem disabled>
<span class="kui-menu-item__label">Archive</span>
</button>
</kui-menu>
</div>Inputs verified against @kikita-labs/ui v1.6.1 public typings.
| Name | Type | Default | Description |
|---|---|---|---|
| ariaLabel | string | 'Actions' | Accessible name for the menu panel. |
| placement | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | Preferred side of the trigger the menu opens on. Auto-flips to the opposite side to fit the viewport. |
| menuAlign | 'start' | 'end' | 'start' | Alignment along the trigger edge. For top/bottom placement, start is left-aligned and end is right-aligned. For left/right placement, start is top-aligned and end is bottom-aligned. |
| offset | number | 4 | Pixel gap between the trigger and the menu panel. |
| minWidth | string | null | null | Optional overlay minimum width. |
| [kuiMenuFor] | KuiMenuComponent | undefined | - | Wires a native trigger to a menu instance and manages trigger ARIA state. |
| kuiMenuHeader | - | - | Marks a non-interactive group heading inside the menu panel. Renders with role="presentation". |
| kuiSeparator | - | - | Native hr[kuiSeparator] divider between menu item groups. See the Separator page for spacing and appearance inputs. |
| kuiMenuItem.appearance | 'neutral' | 'destructive' | 'neutral' | Visual treatment for an action item. Use destructive for dangerous actions. |
| kuiMenuItem.disabled | boolean | false | Prevents activation and applies disabled/aria-disabled semantics. Disabled items are skipped by keyboard navigation. |
Menu owns keyboard navigation while keeping triggers and items native.