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.

jsx

<LlmButton llmMenuTriggerFor={actionsMenu}>Actions ▾</LlmButton>
{/* In template: */}
<LlmMenu ref={actionsMenu}>
  <LlmMenuItem onTriggered={() => console.log('copy')}>Copy</LlmMenuItem>
  <LlmMenuItem onTriggered={() => console.log('paste')}>Paste</LlmMenuItem>
  <LlmMenuSeparator />
  <LlmMenuItem disabled={true}>Delete</LlmMenuItem>
</LlmMenu>

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