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

API reference

Reference for the tng-menu component and [tngMenuTriggerFor] wiring from @tailng-ui/components, with primitives projected into the menu host.

Wrapper APIs

Element / DirectiveInput / OutputTypeDescription
<tng-menu>ariaLabelstringAccessible label for the menu panel.
<tng-menu>loop, disabled, closeOnSelectbooleanControls focus traversal, interaction lock, and auto-close behavior.
<tng-menu>dismissOnOutsideClick, dismissOnFocusoutbooleanDismiss policy for pointer and focus transitions.
<tng-menu>tngMenuOpened, tngMenuClosed, tngMenuSelectEventEmitterMenu lifecycle and selection outputs.
[tngMenuTriggerFor]tngMenuTriggerForTngMenuConnects a trigger element to a wrapper menu instance.

Projected directives

DirectiveUsed onPurpose
tngMenuItemProjected command button Selectable command item. Combine with tngMenuItemValue for emitted values, or [tngMenuItemSubmenu] for cascaded menus.
tngMenuGroupLabelProjected label elementOptional section label for grouped command sets inside a wrapper menu.
tngMenuSeparatorProjected separator elementVisual break between clusters of commands inside the same wrapper menu.

Keyboard contract (high level)

  • ArrowDown/ArrowUp moves active item through enabled options.
  • Home/End jumps to first and last item.
  • Enter/Space selects active option.
  • Escape closes current menu and returns focus to trigger.
  • ArrowRight/ArrowLeft traverses submenu levels or menubar-owned menu handoff.