Best React Sidebar Components (2026): 8 Navigation Sidebars Compared

shadcn/ui Sidebar is the most complete free React sidebar: icon collapse, a mobile sheet, a Cmd/Ctrl+B shortcut, a state cookie, router-friendly menu buttons and RTL, as MIT code you copy into your app. CoreUI CSidebar is the strongest ready-made MIT package if you want narrow and hover-expand modes plus automatic mobile behaviour as plain props. PrimeReact 11 Sidebar matches it on modes and adds dual sidebars, under the PrimeUI License. Mantine AppShell is the best full layout system, with a navbar you can resize by mouse, touch or keyboard. Ant Design Layout.Sider with Menu is the safe pick for antd apps, especially when collapsed menus should open submenus as popups.

How we compared

We reviewed eight React sidebar options in October 2026 against a 21-feature checklist (display modes, navigation, state and theming) on current releases: the shadcn/ui registry (CLI 4.23.0), primereact 11.2.2, @mantine/core 9.7.4, antd 6.6.8, @mui/material 9.5.0, @heroui-pro/react 1.0.0-beta.10, @coreui/react 5.13.1 and react-bootstrap 2.10.10.

Facts come from vendor docs, vendor source code and public demos. A ❌ for a competitor means the vendor’s own docs or a demo showed the gap. — 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 another component, or part of the behaviour · ❌ confirmed absent (demo test, vendor docs, or for CoreUI our own source) · — no data

Library	Licence	Collapse to icons	Expand on hover	Mobile overlay	Auto breakpoint switch	Nested groups	Submenus when collapsed	Router integration	Remembers state	Keyboard shortcut	Resizable	RTL
shadcn/ui Sidebar	MIT (copied code)	✅	—	✅	✅	✅	Partial (tooltips)	✅	Partial (writes cookie)	✅ Cmd/Ctrl+B	—	✅
PrimeReact Sidebar (11.2.2)	PrimeUI License	✅	✅	✅	Partial (example)	✅	—	Partial	—	—	—	✅
Mantine AppShell + NavLink	MIT	Partial (example)	—	Partial	✅	✅	—	✅	Partial (pattern)	Partial (useHotkeys)	✅	✅
Ant Design Layout.Sider + Menu	MIT	✅	—	Partial (styles)	✅	✅	✅	Partial	—	—	—	✅
MUI Drawer + List	MIT	Partial (demo)	—	✅	Partial (two drawers)	✅	—	✅	—	—	—	✅
HeroUI Pro Sidebar (beta)	Commercial	✅	—	✅	✅	✅	—	✅	Partial (writes cookie)	✅ Cmd/Ctrl+B	—	Partial
CoreUI CSidebar (@coreui/react 5.13.1)	MIT	✅	✅	✅	✅	✅	❌	Partial	❌	❌	❌	Partial
React Bootstrap Offcanvas + Nav (generic panel)	MIT	—	—	✅	✅	Partial (NavDropdown)	—	Partial	—	—	—	✅

The libraries, one by one

shadcn/ui Sidebar is a composable set (SidebarProvider, SidebarHeader, SidebarContent, SidebarMenu, SidebarMenuSub, SidebarGroup, SidebarRail, SidebarInset) with collapsible="offcanvas", "icon" or "none", three variants (sidebar, floating, inset), a dedicated set of --sidebar-* theme variables and a documented RTL demo. Below 768 px it switches to a Radix sheet automatically. setOpen writes a sidebar_state cookie for seven days, but reading it back into defaultOpen is your job. In icon mode menu buttons show tooltips, and a flyout submenu is something you compose from a dropdown. Its docs call SidebarRail a “resize handle”, but in the code it is a toggle button.

Choose it if you want the most capable free sidebar and are happy to own its code.

In PrimeReact 11, Sidebar means an application navigation system (in 10.x the name meant an off-canvas panel, now called Drawer). It collapses to a 3 rem icon rail by default, opens on hover with configurable delays, overlays content with an animated backdrop, supports left, right, dual and multiple sidebars, and offers grouped and recursively nested menus with badges and actions. The responsive switch is an example you wire up with a useIsMobile hook.

Choose it if you want rail, hover and multi-sidebar layouts in one component and accept the PrimeUI licence.

Mantine AppShell

Mantine AppShell is a layout system: header, navbar, aside, footer and main, with the navbar switching to mobile mode at a breakpoint and offsetting the main area automatically. Its standout is useAppShellResize: the navbar can be resized with mouse, touch and keyboard (arrows, Home, End), with min and max widths and drag-to-collapse. NavLink handles icons, badges, nesting and active state from React Router. Icon-only mode is an example on ui.mantine.dev, not a prop.

Choose it if you need a complete app layout with resizable panels.

Ant Design Layout.Sider

Ant Design Layout pairs Layout.Sider with Menu. collapsed with collapsedWidth (80 px by default) and Menu inlineCollapsed gives an icon rail whose submenus open as popups, with tooltips for collapsed items (6.3.0). breakpoint collapses the sider automatically, reverseArrow places it on the right, and theme="dark" is the default look. Menu items take icons, labels, an extra slot and groups with dividers. Overlay is a styling demo (“Collapsible overlay”) rather than a mode with a backdrop, and the active item is driven by selectedKeys, which your app maps from the URL.

Choose it if you build on antd and want collapsed menus that still reach every page.

MUI Drawer

MUI Drawer offers permanent, persistent and temporary variants. The temporary drawer is built on Modal and, per the docs, is dismissed by clicking the overlay; it also swaps left and right automatically in RTL. Navigation comes from List, ListItemButton, ListSubheader and nested lists with Collapse, and the routing guide shows component={Link}. The “mini variant” and the responsive drawer are demos you copy (styled overrides, or two drawers toggled by breakpoint classes), and MUI’s free Dashboard template covers the full app shell.

Choose it if you are on Material UI and want the standard Material navigation drawer.

HeroUI Pro Sidebar is the closest to shadcn/ui’s feature set in a packaged form: icon collapse (the default) with tooltips, offcanvas mode, a mobile sheet at 768 px and below, groups, sections and submenus built on React Aria Tree, client-side routing via RouterProvider or navigate, a sidebar_state cookie, a configurable toggleShortcut (Cmd/Ctrl+B by default) and a reduceMotion option. AppLayout adds a full page scaffold. It is commercial and still a beta on npm (1.0.0-beta.10), and its prices render client-side, so we could not verify them.

Choose it if you already use HeroUI and can adopt a beta commercial package.

CoreUI CSidebar

Our own entry. CoreUI Sidebar for React is free (MIT) in @coreui/react. The modes are plain props: narrow for an icon rail, unfoldable to “make the sidebar narrow and expand it on hover”, overlaid, and automatic mobile mode below the breakpoint with a backdrop that closes on outside click and after a link click. It has header, brand, scrollable nav and footer regions, placement="start" or "end", a colorScheme="dark" variant independent of the page, and CNavGroup for multi-level navigation, including a tree variant and groups that expand automatically around the active link.

What it lacks, from our own docs and source: no saved collapse state, no keyboard shortcut, no resize, and no flyout submenus in narrow mode. Router links work through the polymorphic as prop, but the docs do not show a router example. RTL is documented only in the CoreUI for Bootstrap docs. The content offset is exposed as CSS variables that our admin templates consume; see pricing for those.

Choose it if you want hover-expand, narrow and mobile modes without assembling them yourself, in a Bootstrap-based app.

React Bootstrap Offcanvas

React Bootstrap has no dedicated sidebar; its docs suggest Offcanvas to “Build hidden sidebars into your project for navigation”. With responsive="lg" it renders inline above the breakpoint and as a panel below. Navigation is Nav in a column, with NavDropdown as the only second level.

Choose it if you need a simple responsive menu in a Bootstrap app rather than an application sidebar.

Not in the table

Chakra UI’s free library offers Drawer, a generic off-canvas panel; sidebar layouts are sold as copy-paste blocks in Chakra UI Pro ($299 Personal or $899 Team at the promotional price, normally $349 and $999, one-time).

What changed in 2026

PrimeReact 11 gave the name Sidebar to its new navigation system and moved to the PrimeUI License (free Community tier under $1M revenue, five developers, ten employees and $3M funding; otherwise $599 per developer until 31 December 2026, then $799).
HeroUI Pro reached 1.0.0-beta.10 in September 2026, with broader RTL support across Pro components announced in beta 8.

FAQ

shadcn/ui Sidebar, if you are comfortable owning copied code; CoreUI CSidebar, if you prefer an npm package with narrow, hover-expand and mobile modes as props. Both are MIT.

Which React sidebars collapse to icons?

shadcn/ui (collapsible="icon"), PrimeReact 11 (collapsible="icon", the default), Ant Design (collapsed with Menu inlineCollapsed), HeroUI Pro and CoreUI (narrow). MUI and Mantine show it as a copyable example.

shadcn/ui and HeroUI Pro both toggle with Cmd+B on macOS and Ctrl+B elsewhere; HeroUI Pro lets you change or disable it with toggleShortcut.

Which React sidebars remember whether they were collapsed?

shadcn/ui and HeroUI Pro write a sidebar_state cookie on every toggle, and you read it back on the server to set defaultOpen. Mantine documents a pattern for persisting navbar width with use-local-storage.