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

Examples

Reference patterns for trigger wiring, command groups, nested submenu behavior, and public-state styling hooks.

Action menu variants

Open with click or Enter/Space, then traverse options with Arrow keys.

Wrapper action menu (plain CSS)

last command: No command yet

Button trigger

Use tng-button as the menu trigger. [tngMenuTriggerFor] wires open/close, keyboard support, and ARIA state on the button host.

tng-button menu trigger (plain CSS)

last command: No command yet

State-driven styling hooks

Style wrapper menus through public attributes like aria-expanded, data-state, data-active, and aria-disabled without reaching into private DOM.

Wrapper state styling (plain CSS)

Use this example when you want to own the trigger and panel look, while styling from public state hooks like aria-expanded, data-state, and data-active.

last styled command: No command yet

Icon trigger

Use tng-icon as the menu trigger. [tngMenuTriggerFor] on the icon host opens and closes on click; add tabindex="0" and aria-label for keyboard and screen reader support.

tng-icon menu trigger (plain CSS)

last command: No command yet

Cascaded submenu example

Nested submenu wiring with [tngMenuItemSubmenu]. Use ArrowRight on the active parent option to enter deeper levels.

Wrapper cascaded menu (plain CSS)

last cascaded command: No command yet

Sticky header overlay

A menu trigger inside a sticky blurred header stays aligned while the shell scrolls.

Sticky filtered header menu

WorkspaceReview queue

last shell command: No command yet