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.