Menu — Atelier

Demo

Live PreviewReact

Menu is built on @angular/cdk/menu. See the Data List with Actions cookbook pattern for a live interactive demo.

html

<llm-button [llmMenuTriggerFor]="actions">Actions ▾</llm-button>
<ng-template #actions>
  <llm-menu>
    <llm-menu-item (triggered)="copy()">Copy</llm-menu-item>
    <llm-menu-item (triggered)="paste()">Paste</llm-menu-item>
    <llm-menu-separator />
    <llm-menu-item [disabled]="true">Delete</llm-menu-item>
  </llm-menu>
</ng-template>

API (Angular)

Prop	Type	Default	Description
`variant`	`'default' \| 'compact'`	`'default'`	Density of the menu

Composition parts

Menu is composed from the parts below. Each part is its own component — drop the ones you don't need.

`LlmMenuItem`

A selectable menu entry. Children render as the label.

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Prevents activation and skips the item in keyboard navigation.

`LlmMenuSeparator`

A visual divider between groups of menu items. Rendered with role="separator" — screen readers announce it as a group boundary. Takes no props.

Import

import { LlmMenu, LlmMenuItem, LlmMenuSeparator, LlmMenuTrigger } from '@atelier-ui/angular';

Accessibility

ARIA rolemenu / menuitem

Key	Action
`Enter / Space / Arrow Down`	Open the menu from the trigger and focus the first item.
`Arrow Up / Down`	Move between items, wrapping at the ends.
`Home / End`	Jump to the first / last item.
`Enter / Space`	Activate the focused item and close the menu.
`Escape`	Close and return focus to the trigger.
`Arrow Right`	Open a submenu (if present).
`Arrow Left`	Close the current submenu and return to parent.

Explore in Storybook

Edit this page on GitHub