DocumentationComponents
Navigation

Menu

A dropdown context menu built on @angular/cdk/menu. Handles keyboard navigation, focus management, ARIA, and nested submenus.

LlmMenu + LlmMenuItem + LlmMenuTrigger

Demo

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

<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

PropTypeDefaultDescription
variant'default' | 'compact''default'Density of the menu

Import

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