Drawer

Drawer / Sidenav

Tailwind demo for tngDrawerContainer, tngDrawer, tngDrawerContent, tngSidenav*, and wrapper <tng-drawer>.

Headless Primitive: Single Drawer

Toggle open state, mode, direction, and position. In push/side mode, content offset updates are driven by the primitive.

State
Mode
Direction
Position

Main Workspace

Content margins are managed by the primitive for push/side modes.

Component Wrapper: <tng-drawer>

Wrapper demo with the same primitive contract exposed through <tng-drawer>.

Wrapper Content Region

Uses tngDrawerContent; offset/inert behavior still comes from primitives.

Headless Primitive: Dual Drawers

Open start/end drawers together in push mode, or enable closeOthersOnOpen for one-open-at-a-time behavior.

Start
End

Document Canvas

With both drawers open and closeOthersOnOpen=false, both side offsets are applied.

Alias Demo: Sidenav Primitives

tngSidenavContainer, tngSidenav and tngSidenavContent are aliases over the drawer primitives.

Content Area

Alias behavior matches drawer behavior.