Best Angular Sidebar Components (2026): 8 Navigation Sidebars Compared
Short answer. Choose Spartan/ng Sidebar if you want the shadcn-style sidebar for Angular: icon collapse, a mobile sheet, automatic breakpoint switching, a state saved in a cookie and a Ctrl/⌘+B shortcut, all MIT. Choose NG-ZORRO Sider and Menu if you want free icon collapse with flyout submenus and router-aware menu items. Choose CoreUI Sidebar (free) if you are building an admin layout and want narrow and hover-expand modes, a mobile overlay, automatic breakpoints and nested router navigation in one component. Choose PrimeNG Sidebar, new in version 22, if you need icon mode with hover opening and the PrimeUI License fits. Choose Angular Material Sidenav if you need a plain drawer container in a Material app.
How we compared
We compared 8 Angular sidebar and navigation drawer components in October 2026 using each vendor’s documentation, API reference, published package code and current npm release. A ❌ means the vendor’s documentation states the gap. When the documentation is silent we write — (no data), which is not a claim that the feature is missing. CoreUI publishes this page; CoreUI’s own ❌ entries come from its API reference and package code.
The comparison at a glance
Legend: ✅ built in · Partial = example code, separate component, experimental, or limited · ❌ confirmed missing · — no data
| Library (version) | Collapse to icons | Expand on hover | Mobile overlay | Auto breakpoint switch | Nested groups | Submenus when collapsed | Router integration | Remembers state | Keyboard shortcut | Resizable | Header and footer slots | RTL | License |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Spartan/ng 1.8.3 | ✅ | — | ✅ | ✅ | ✅ | Partial | Partial | ✅ (cookie) | ✅ | — | ✅ | ✅ | MIT, code copied into your repo |
| NG-ZORRO 22.1.2 | ✅ | — | Partial (Drawer) | ✅ | ✅ | ✅ | ✅ | — | — | Partial (experimental) | Partial | ✅ | MIT |
| CoreUI 5.7.38 | ✅ (narrow) | ✅ (unfoldable) | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ | Partial | MIT |
| PrimeNG 22.1.4 | ✅ | ✅ | ✅ | Partial (example) | ✅ | — | Partial | — | — | — | ✅ | ✅ | PrimeUI License: free under size limits, $599/dev |
| Taiga UI 5.30.0 | ✅ | — | Partial (Drawer) | — | ✅ | ✅ | ✅ | — | — | — | ✅ | ✅ | Apache-2.0 |
| Kendo UI Drawer 25.3.0 | ✅ (mini) | — | ✅ | — | ✅ | — | ✅ | — | — | — | ✅ | ✅ | Commercial, $799–1,299/dev/year |
| Angular Material 22.2.4 | Partial | — | ✅ | Partial (example) | — | — | Partial | — | — | — | — | ✅ | MIT |
| ng-bootstrap Offcanvas 21.0.0 | — | — | ✅ | — | — | — | Partial | — | — | — | Partial | — | MIT |
The libraries, one by one
Spartan/ng Sidebar
Spartan/ng Sidebar (brain 1.8.3, MIT) ports the shadcn/ui sidebar to Angular. collapsible="icon" collapses to icons with tooltips, the sidebar becomes a sheet below 768 px, the state is stored in a cookie for 7 days and Ctrl/⌘+B toggles it. Groups, nested submenus, badges, actions, skeletons, header and footer, sidebar, floating and inset variants, theme variables and an RTL demo are included. Active links are set through isActive, router integration is not documented, and the styled code is copied into your project.
Choose it if you want a modern app shell in a Tailwind codebase.
NG-ZORRO Layout Sider and Menu
NG-ZORRO 22.1.2 (MIT) combines nz-sider with nz-menu. nzCollapsed and nzCollapsedWidth shrink it to icons, nzBreakpoint collapses it automatically, nzInlineCollapsed opens submenus as popups while collapsed, and nzMatchRouter marks the active item from the router. Light and dark themes are built in. A mobile off-canvas panel is a separate nz-drawer, and resizing uses the experimental nz-resizable directive.
Choose it if you want a free sidebar with flyout submenus in the Ant Design style.
CoreUI Sidebar
Our own entry. CoreUI Sidebar is in the free @coreui/angular 5.7.38 (MIT). It has narrow (icons only) and unfoldable (narrow, expanding on hover) modes, an overlaid variant, a mobile mode below the md breakpoint with a backdrop that closes it, start or end placement, fixed or sticky position and sizes. Navigation uses c-sidebar-nav with nestable c-nav-group (accordion per level, tree variant), titles, dividers, badges and Angular Router links with routerLinkActive. Header, brand, footer and toggler slots and a dark color scheme are built in.
Where CoreUI loses: no flyout submenus in narrow mode (unfoldable expands the whole sidebar), no saved state, no toggle shortcut and no resizing. RTL is documented only in CoreUI for Bootstrap, not on the Angular Sidebar page.
Choose it if you are building an admin dashboard and want collapse modes, mobile overlay and router navigation working together for free. CoreUI PRO adds components such as date pickers and Smart Table (pricing).
PrimeNG Sidebar
PrimeNG Sidebar 22.1.4 is a new navigation system in version 22; in earlier versions “Sidebar” meant the off-canvas panel now called Drawer, so older tutorials describe a different component. It offers icon collapse (the default), openOnHover with delays, an overlay with backdrop, left or right placement with dual sidebars, nested menus, groups, badges, actions and header, content and footer parts. The responsive demo switches to off-canvas below 1024 px in application code.
Choose it if you want icon and hover modes and the PrimeUI License works for you.
Taiga UI Navigation
Taiga UI Navigation 5.30.0 (Apache-2.0) has an aside that switches between expanded and icon-only states, groups that open as side dropdowns while collapsed, router-aware items, header and footer areas and theme customization. On mobile the docs show a navigation drawer instead of the aside.
Choose it if your app already uses Taiga UI.
Kendo UI Drawer
Kendo UI Drawer 25.3.0 has mini mode with icons, overlay and push modes, start or end placement, hierarchical items up to five levels, header, footer and item templates, and a router link pattern in item templates. It requires a paid Kendo UI license.
Choose it if your team already licenses Kendo UI.
Angular Material Sidenav
MatSidenav 22.2.4 (MIT) is a drawer container with over, push and side modes, start or end position and two-way opened. Menu content is up to you, typically mat-nav-list; switching modes on small screens is shown as example code with MediaMatcher.
Choose it if you need a simple drawer and will build the navigation yourself.
ng-bootstrap Offcanvas
ng-bootstrap has no sidebar component. Its Offcanvas 21.0.0 (MIT) is a panel opened from code on any edge with a backdrop; the navigation inside is your markup.
Choose it if you need a simple off-canvas menu in a Bootstrap app.
What changed in 2026
- Spartan/ng reached 1.0 on June 24, 2026 and has shipped 1.x releases since, up to 1.8.3 on October 27.
- PrimeNG 22 reintroduced “Sidebar” as a navigation system and moved to the PrimeUI License (22.0.0-rc.1, June 28, 2026). The free Community License covers organizations under $1M revenue with fewer than 5 developers; the commercial license is $599 per developer until December 31, 2026, then $799. PrimeNG 21.1.10 (
v21-stable) is the last MIT release. - Kendo UI for Angular has no free components; subscriptions are $799 to $1,299 per developer per year.
FAQ
What is the best free sidebar component for Angular?
Spartan/ng if you use Tailwind and want saved state and a shortcut; CoreUI Sidebar if you want narrow and hover-expand modes with automatic mobile behavior in a Bootstrap-based admin; NG-ZORRO if you want flyout submenus when collapsed. All three are MIT.
Which Angular sidebars collapse to icons?
Spartan/ng, NG-ZORRO, CoreUI (narrow), PrimeNG, Taiga UI and Kendo UI (mini). Angular Material Sidenav does not document an icon mode; its docs suggest sizing the drawer with CSS.
Which Angular sidebar expands on hover?
CoreUI (unfoldable) and PrimeNG (openOnHover).
Which Angular sidebars remember whether they were collapsed?
Spartan/ng stores the state in a cookie for 7 days. The other libraries do not document saving the state.
Is the PrimeNG Sidebar the same component as before?
No. PrimeNG 18 renamed the old off-canvas Sidebar to Drawer, and PrimeNG 22 reused the name for a new navigation component.