Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Menu overview

Menu wraps trigger wiring, panel lifecycle, and command selection so you can ship command surfaces quickly while still opting into cascaded submenus when needed.

Imports

Imports for the styled tng-menu wrapper and its projected menu primitives.

Component imports

ts
import { TngMenuComponent, TngMenuTriggerFor } from '@tailng-ui/components';
import { TngMenuGroupLabel, TngMenuItem, TngMenuSeparator } from '@tailng-ui/primitives';

Usage patterns

Wrapper usage

html
<button
  type="button"
  id="actions-menu-trigger"
  [tngMenuTriggerFor]="actionsMenu"
>
  Open menu
</button>
<tng-menu #actionsMenu="tngMenu" ariaLabel="Actions menu">
  <div tngMenuGroupLabel>Actions</div>
  <button type="button" tngMenuItem tngMenuItemValue="Export report">Export report</button>
  <div tngMenuSeparator></div>
  <button type="button" tngMenuItem tngMenuItemValue="Copy path">Copy path</button>
</tng-menu>

Style variants

Theme-backed menus: load TailNG component contracts globally; examples only add a small layout shell (and optional Tailwind card chrome).

Wrapper menu (plain CSS)

last command: No command yet

Keyboard baseline

  • ArrowDown/ArrowUp traverses enabled options.
  • Home/End jumps to first and last option.
  • Enter/Space selects the active option.
  • Escape closes the panel and restores focus to the trigger.