Getting StartedInstallation and setup guides 6
LayoutWorkflow and structural layout components 8
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 25
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 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

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