Best JavaScript Sidebar Components (2026): Vanilla JS Navigation Sidebars Compared
Short answer. For a plain JavaScript or Bootstrap app, there are three realistic starting points. CoreUI Sidebar (MIT) is the most complete ready-made navigation sidebar: narrow icon mode, expand on hover, an automatic mobile overlay, nested groups, section titles, badges and a dark variant as classes and methods. Bootstrap Offcanvas is the right choice when you want a simple slide-in panel and are happy to build the navigation from Bootstrap’s Sidebars examples. Web Awesome Page (MIT) is the best full-page layout: navigation, header, aside and footer regions that turn the navigation into a drawer on phones, without navigation items of its own.
How we compared
We reviewed the sidebar options for plain JavaScript that our research base covers, in October 2026, against a 21-feature sidebar checklist (display modes, navigation, state, layout and theming): Bootstrap 5.3.8 Offcanvas plus the official Sidebars examples, Web Awesome 3.14.0 wa-page with wa-drawer, and the CoreUI for Bootstrap Sidebar from the free @coreui/coreui 5.9.1 package. Most other vanilla JavaScript libraries ship a generic off-canvas panel or no sidebar at all, so this comparison is narrower than our React and Vue ones.
Facts come from vendor docs, vendor source code and public demos. A ❌ means the vendor’s docs or a demo showed the gap, or, for CoreUI, our own source. — means we found no evidence either way; it is not a claim of absence.
The comparison at a glance
✅ built in and documented · Partial = an example to copy, composition with other components, or part of the behavior · ❌ confirmed absent · — no data
| Option (version) | License | Collapse to icons | Expand on hover | Mobile overlay | Auto breakpoint switch | Nav items with icons and badges | Nested groups | Section titles | Active link | Remembers state | Pushes page content | Dark variant | Resizable |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CoreUI Sidebar (coreui 5.9.1) | MIT | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Partial (matches URL) | ❌ | Partial (CSS variables) | ✅ | ❌ |
| Bootstrap Offcanvas + Sidebars examples (5.3.8) | MIT | Partial (example) | — | ✅ | ✅ | Partial (example) | Partial (example) | Partial (example) | Partial (manual class) | — | — | ✅ | — |
| Web Awesome Page + Drawer (3.14.0) | MIT | — | — | ✅ | ✅ | Partial (compose) | Partial (compose) | Partial | — | — | ✅ | Partial (global) | Partial (split panel) |
The options, one by one
CoreUI Sidebar
Our own entry, and free. The CoreUI Sidebar is part of the MIT @coreui/coreui package, the same sidebar used in CoreUI’s admin templates. It is shown by default on desktop and hidden on phones, where the toggler opens it over the page with a backdrop that closes it on click; resizing the window closes the mobile overlay. .sidebar-narrow collapses it to icons, and .sidebar-narrow-unfoldable keeps it narrow until the pointer hovers over it. Both have matching methods (narrow(), unfoldable(), toggleNarrow(), toggleUnfoldable()) next to show(), hide() and toggle(), plus show, shown, hide and hidden events.
Navigation is built in: .nav-item and .nav-link with .nav-icon and badges, multi-level .nav-group sections that expand and collapse, a tree line style with .sidebar-nav-tree, .nav-title headings, and .sidebar-header, .sidebar-brand, a scrollable .sidebar-nav and .sidebar-footer regions. The navigation script marks the link that matches the current URL as active and opens its parent groups. .sidebar-dark gives a dark sidebar independent of the page, color modes work, .sidebar-start and .sidebar-end choose the side, and RTL comes from CoreUI’s RTL stylesheet.
Where it loses: it does not remember the narrow or hidden state between visits, has no keyboard shortcut and no drag to resize, shows tooltips rather than flyout submenus in narrow mode, and leaves the page offset to your layout through --cui-sidebar-occupy-start and --cui-sidebar-occupy-end variables (the admin templates already consume them).
Choose it if you need a full admin navigation sidebar in a Bootstrap project without building it from parts. The admin dashboard template shows it wired into a complete layout.
Bootstrap Offcanvas and the Sidebars examples
Bootstrap 5.3 has no sidebar component. What it has is Offcanvas: a panel that slides in from the start, end, top or bottom over the page, with a backdrop that closes it on click (or backdrop: "static"), show(), hide() and toggle(), and events where hide can be canceled. Responsive classes such as .offcanvas-lg keep the content in the normal layout above a breakpoint and turn it into an off-canvas panel below it, which is how you get an automatic mobile mode. data-bs-theme="dark" makes the panel dark.
The navigation itself comes from the Sidebars page in Bootstrap’s Examples: HTML and CSS templates with icon-only and collapsible variants that you copy and adapt. That means no methods for narrow mode, no hover expand, and active links set by hand with the .active class. Offcanvas has .offcanvas-header and .offcanvas-body, but no footer region.
Choose it if your navigation is short, you want only official Bootstrap code, and you are comfortable maintaining a template.
Web Awesome Page and Drawer
Web Awesome is the successor of Shoelace (the Shoelace repository is archived). Its wa-page component, moved from Pro to the free MIT core in version 3.5.0, is an application layout: navigation-header, navigation and navigation-footer slots next to header, subheader, main, aside and footer regions. Below mobile-breakpoint the navigation becomes a wa-drawer opened by a toggle button, closing on an overlay click, and the main content takes the freed space. A separate aside slot gives you a second side panel, and navigation-placement chooses the side on mobile.
wa-page deliberately does not provide navigation content: you compose items from links, wa-tree or wa-details, badges and icons. Its docs note that the drawer only opens on mobile views, so on desktop the navigation region stays visible; there is no narrow icon mode or hover expand. For resizable panels there is a separate wa-split-panel. Dark mode is global through the theme rather than a sidebar variant.
Choose it if you want a free, web-component page layout and plan to build the navigation inside it yourself.
Building it yourself
If none of the three fits, the pieces are small: a <nav> list of links, a toggle that adds a class, a media query that switches between a fixed column and an overlay, and localStorage if you want the collapsed state to survive reloads (none of the three options above stores it for you). The work grows with nested groups, icon-only mode with hover expand, and keeping the page offset in sync, which is where a ready component like CoreUI Sidebar saves the most time.
FAQ
What is the best free JavaScript sidebar for Bootstrap projects?
CoreUI Sidebar. It is MIT, built on Bootstrap 5 conventions and includes narrow icon mode, hover expand, a mobile overlay, nested groups, section titles, badges and a dark variant. Bootstrap itself offers Offcanvas plus copyable Sidebars examples.
Does Bootstrap 5 have a sidebar component?
No. Bootstrap 5.3 offers Offcanvas, a slide-in panel, and a Sidebars page in its Examples with HTML and CSS templates. Collapsing to icons or expanding on hover has to be built from those templates.
Can a JavaScript sidebar remember whether it was collapsed?
None of the three options here stores the state for you. With CoreUI Sidebar, listen to its events or call narrow() and unfoldable() on load based on a value you keep in localStorage.
Which sidebar collapses to icons and expands on hover?
CoreUI Sidebar, with .sidebar-narrow for icons only and .sidebar-narrow-unfoldable for expand on hover. Bootstrap has an icon-only example to copy, and Web Awesome Page has no narrow mode.
Can the sidebar sit on the right side of the page?
Yes, in all three. CoreUI Sidebar uses .sidebar-start or .sidebar-end. Bootstrap Offcanvas slides in from the start, end, top or bottom with .offcanvas-start, .offcanvas-end, .offcanvas-top and .offcanvas-bottom. Web Awesome Page sets the mobile drawer side with navigation-placement and also has a separate aside slot for a second panel on the right.
Is the CoreUI Sidebar free?
Yes. It is part of the free, MIT @coreui/coreui package, and CoreUI’s admin dashboard templates use it. CoreUI PRO adds components such as date pickers and multi selects, at $127 per developer.