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

<atl-button [atlMenuTriggerFor]="actions">Actions ▾</atl-button>
<ng-template #actions>
  <atl-menu>
    <atl-menu-item (triggered)="copy()">Copy</atl-menu-item>
    <atl-menu-item (triggered)="paste()">Paste</atl-menu-item>
    <atl-menu-separator />
    <atl-menu-item [disabled]="true">Delete</atl-menu-item>
  </atl-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.

`AtlMenuItem`

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.

`AtlMenuSeparator`

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 { AtlMenu, AtlMenuItem, AtlMenuSeparator, AtlMenuTrigger } 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