Sidebar is a complete vertical app or workspace sidebar for persistent navigation and supporting sidebar content. Use it inside a shell sidebar region, usually within Sidenav or LayoutSidebar, when the app needs a real sidebar with header, body, footer, navigation items, groups, headings, dividers, badges, icons, and active state.
Use it for:
- App and admin shell sidebars with brand, workspace switcher, main navigation, and footer content.
- Navigation with
ngs-sidebar-nav, ngs-sidebar-nav-item, active keys, icons, badges, headings, dividers, and expandable groups. - Data-driven sidebar navigation with item templates when the navigation tree comes from configuration.
Sidebar has its own navigation system. If ngs-sidebar is not used and a persistent navigation block is still needed, use Navigation instead. Do not use Sidebar as a generic left column, card, drawer content, inspector, page section, tabs, menu, or compact icon rail. Use Sidenav for responsive open, collapse, or overlay behavior, RailNav for compact icon navigation, and SidePanel for secondary tabbed tools beside the main content.
The NgStarter Angular Sidebar component lets you provide a complete vertical app or workspace sidebar with its own navigation system. Use ngs-sidebar as the content inside a shell sidebar region, usually inside Sidenav or LayoutSidebar, when an admin app or workspace needs persistent sidebar navigation and supporting sidebar content. It includes examples for Basic sidebar, Sidebar structure helpers, Dynamic compact sidebar, Only compact sidebar, and Sidebar with custom icons.
Use Sidebar when an app shell needs persistent navigation with header, body, footer, groups, and active items.
Use ngs-sidebar-divider to separate navigation groups and ngs-sidebar-spacer to push lower-priority groups toward the bottom of a fixed-height sidebar nav.
Bind ngs-sidenav collapsed state when users can switch between full and hover-expandable compact navigation. Use *ngsSidenavExpanded and *ngsSidenavCollapsed for blocks that change between modes.
Use onlyCompact when the sidebar should stay as an icon rail and must not expand on hover.
Use icon and badge slots to make sidebar navigation easier to scan while keeping Sidebar as the navigation owner.
