Sidebar Layout
A composable, responsive sidebar layout that you can copy and paste into your apps.
Usage
The live demo above is the full page-shell composition; this is the minimal shape.
API Reference
| Input | Type | Default |
|---|---|---|
| width | string | — |
| collapsedWidth | string | — |
| label | string | — |
| routerLink * | string | — |
| queryParams | Record<string, string> | undefined | undefined |
| exact | boolean | false |
Width
The sidebar is 18rem expanded and 4rem collapsed by default. Override either one with the width / collapsedWidth inputs, or globally with the --volt-sidebar-width / --volt-sidebar-collapsed-width custom properties — useful for a resizable sidebar, where you drive the custom property from a drag handle. Inputs win over custom properties, and both accept any CSS length.
Configuring the width
Reach for the custom property when the width is dynamic or set from outside Angular.
Component Source
npx @voltui/cli add sidebarCopy this code to your project. VoltSidebarService holds the collapsed/mobile-open state as signals; nothing else in the layout depends on Angular Router beyond routerLink.