Menu overview

Headless menu owns the panel, selection, submenus, and keyboard behavior. Pair tngMenuTrigger with tngMenu for standalone dropdowns, or compose with tngMenubar for command strips (see the Menubar docs).

import {
  TngMenu,
  TngMenuTrigger,
  TngMenuItem,
  TngMenuGroupLabel,
  TngMenuSeparator,
} from '@tailng-ui/primitives';

Basic composition

Place a trigger before the panel. Link them with [tngMenuTrigger] so open/close, aria-expanded, and focus restoration stay coordinated.

<div class="menu-shell">
  <button type="button" [tngMenuTrigger]="overviewUsageActionsMenu">Open</button>
  <div tngMenu #overviewUsageActionsMenu="tngMenu" aria-label="Actions">
    <button type="button" tngMenuItem tngMenuItemValue="save">Save</button>
  </div>
</div>

Keyboard baseline

• Trigger:Enter/Space open; ArrowDown opens focusing first item; ArrowUp opens focusing last item; Escape closes when open.
• Open panel:ArrowDown/ArrowUp move active item; Home/End jump; typeahead matches item text; Enter/ Space activates; Escape closes (submenu closes to parent first).
• Submenus:ArrowRight opens; ArrowLeft closes nested panel and returns focus to the parent menu.