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

API reference

Menubar docs cover wrapper components (tng-menubar/tng-menu) and headless directives for full ownership.

Wrapper APIs

ElementInput / OutputTypeDescription
<tng-menubar>ariaLabelstringAccessible label for the menubar region.
<tng-menubar>loopbooleanWrap focus movement between first/last top-level items.
<tng-menu>ariaLabelstringAccessible label for the menu panel.
<tng-menu>loop, disabled, closeOnSelectbooleanConfigures item navigation and close behavior.
<tng-menu>tngMenuOpened, tngMenuClosed, tngMenuSelectEventEmitterLifecycle and selection events for menu interaction.

Primitive directives

DirectivePurposeKey inputs
tngMenubarTop-level command bar semantics and roving focus.loop
tngMenubarItemFocusable menubar item and owned menu link.[tngMenubarMenu]
tngMenuMenu panel with keyboard traversal and typeahead.loop, disabled, closeOnSelect
tngMenuItemSelectable option in menu panel.tngMenuItemValue, disabled, [tngMenuItemSubmenu]

Keyboard contract (high level)

  • ArrowRight/ArrowLeft moves across top-level items.
  • ArrowDown opens a menu and focuses the first enabled item.
  • Home/End jump to first/last top-level item.
  • Escape closes open menus and restores focus to the owning item.