Overview
tng-sidenav is a collapsible side navigation panel. Bind [collapsed] to toggle between expanded and narrow (icon-only) width. Use [tngSidenavHeader] and [tngSidenavFooter] for optional header/footer; default slot is the main nav content. Exposes data-collapsed for styling (e.g. group-data-[collapsed=true]:...).
Quick example
Basic
<tng-sidenav [collapsed]="collapsed()">
<div tngSidenavHeader class="...">App</div>
<div class="..."><a>Dashboard</a><a>Settings</a></div>
<div tngSidenavFooter class="...">v1.0</div>
</tng-sidenav>
<button (click)="collapsed.set(!collapsed())">Toggle</button>
import { TngSidenav, TngSidenavHeaderSlot, TngSidenavFooterSlot } from '@tailng-ui/ui/navigation';
collapsed = signal(false);Content
Features
Collapsed state
collapsed: boolean. Use slot (e.g. expanded / collapsed keys) to control width. Use group and data-collapsed for hiding labels in collapsed mode.
Slots
tngSidenavHeader, default (main content), tngSidenavFooter. slot.content, slot.footer for layout.