Best Vue Sidebar Components (2026): 7 Vue 3 Navigation Drawers Compared

Vuetify’s VNavigationDrawer is the best all-round Vue sidebar: rail mode, expand on hover, an automatic switch to a temporary overlay on small screens, vue-router support out of the box and a layout system that offsets the page for you, all under MIT. Quasar’s QDrawer is the strongest choice for mobile-first and hybrid apps, with a mini mode, swipe gestures and a visual Layout Builder. PrimeVue 5’s new Sidebar brings a modern compound API with icon mode, hover opening and dual sidebars, under the PrimeUI License. CoreUI CSidebar for Vue gives you narrow, hover-expand and automatic mobile modes as plain props in a free package. Ant Design Vue, Element Plus and Naive UI build the sidebar from a layout region plus a menu, which is the better fit when collapsed menus must open their submenus as popups.

How we compared

We reviewed seven Vue 3 sidebar options in October 2026 against a 21-feature checklist covering display modes, navigation, state and theming, on vuetify 4.3.1, quasar 2.35.2, primevue 5.0.4, naive-ui 2.45.3, element-plus 2.14.7, ant-design-vue 4.2.6 and @coreui/vue 5.10.1. Three of them have no single sidebar component (Element Plus, Naive UI and Ant Design Vue pair a layout region with a menu), and we scored the combination their docs recommend.

Facts come from vendor docs, vendor source code and, where available, public demos. We mark a competitor’s feature ❌ only when the vendor’s own docs or a demo test show the gap. — means we found no evidence either way, which is not the same as “missing”. For the CoreUI row, ❌ comes from our own docs and source.

The comparison at a glance

✅ built in and documented · Partial = an example to copy, a separate component to wire in, opt-in, or part of the behaviour · ❌ confirmed absent · — no data

Library	Licence	Collapse to icons	Expand on hover	Mobile overlay	Auto breakpoint switch	Nested groups	Submenus when collapsed	vue-router integration	App shell layout	Dark variant	Remembers state	RTL
Vuetify VNavigationDrawer + VList	MIT	✅ (rail)	✅	✅	✅	✅	—	✅	✅	✅	—	✅
Quasar QDrawer + QList	MIT	✅ (mini)	Partial (example)	✅	✅	✅	—	✅	✅	✅	—	✅
PrimeVue Sidebar (5.0.4)	PrimeUI License	✅	✅	✅	Partial (example)	✅	—	Partial	Partial	Partial	—	✅
Naive UI NLayoutSider + NMenu	MIT	✅	—	Partial (NDrawer)	—	✅	✅	Partial	✅	✅ (inverted)	—	—
Element Plus ElAside + ElMenu	MIT	✅ (ElMenu collapse)	—	Partial (ElDrawer)	—	✅	✅	✅	✅	✅	—	—
Ant Design Vue Sider + Menu (4.2.6)	MIT	✅	—	—	✅	✅	✅	Partial	✅	✅	—	✅
CoreUI CSidebar (@coreui/vue 5.10.1)	MIT	✅ (narrow)	✅	✅	✅	✅	❌	Partial	Partial	✅	❌	Partial

“App shell layout” means the library ships the header, sidebar and content scaffold as components.

The libraries, one by one

Vuetify VNavigationDrawer

VNavigationDrawer covers every display mode with a prop: permanent, temporary with a scrim, rail (56 px by default, adjustable with rail-width) and expand-on-hover. Below mobile-breakpoint it becomes temporary automatically, and location puts it on any side, with an example of two drawers at once. The docs pair it with VList nav: icons, badges, VListGroup for nesting, subheaders, and routable items with to and exact, since it is “pre-configured to work with or without vue-router”. In rail mode the docs say the drawer hides “everything inside of v-list except the first element”.

Choose it if you want the most complete free sidebar and Material styling suits you.

Quasar QDrawer

QDrawer lives inside QLayout, whose view string (for example hHh lpR fFf) and Layout Builder define how header, drawers and footer relate. It has mini mode with mini-width and a mini slot, mini-to-overlay, a mobile behaviour below a 1023 px breakpoint with backdrop, swipe gestures and body scroll lock, and drawers on both sides at once on desktop. Navigation uses QItem with router props and QExpansionItem for nesting.

Choose it if you build mobile or hybrid apps with Quasar and want gestures included.

PrimeVue Sidebar is new in 5.x and is now an application navigation system (the older off-canvas panel is called Drawer). It collapses to a 3 rem icon rail by default, opens on hover with 50 ms and 100 ms delays, overlays content with a backdrop, and supports dual and multiple sidebars through SidebarTrigger targets. Menus have groups, nested sub-items, badges and actions, and SidebarLayout with SidebarMain pushes content aside. The responsive behaviour is an example: “Below 1024px the sidebar turns into an offcanvas overlay … Use a matchMedia reactive flag to switch”.

Choose it if you want a shadcn-style compound sidebar in Vue and accept the PrimeUI licence.

Naive UI NLayoutSider

Naive UI combines NLayoutSider (collapse by width or transform, a built-in show-trigger bar or arrow, left or right placement) with NMenu, which collapses to icons and opens submenus as dropdowns in collapsed mode (dropdown-props). Menu options support icons, an extra slot for badges, groups and dividers, and inverted gives a contrasting dark sider. Router links are rendered through render-label. On mobile you wire up the separate NDrawer.

Choose it if you are on Naive UI and want collapsed menus with popup submenus.

Element Plus ElAside and ElMenu

Element Plus has no dedicated sidebar: ElAside is a layout region with a single width prop, and the behaviour comes from ElMenu. In collapse mode the menu shrinks to icons and opens submenus as poppers with tooltips for labels, while you keep the aside’s width in sync yourself. Its router prop activates routes directly: “If true, index will be used as path to activate the route action.” Groups, multi-level submenus and dark mode through CSS variables are built in. For mobile, you wire up the generic ElDrawer.

Choose it if your app uses Element Plus and you want the most direct vue-router integration.

Ant Design Vue Sider

Ant Design Vue Layout uses a-layout-sider with a-menu: collapsed (v-model) with an 80 px collapsedWidth, inlineCollapsed menus that open submenus in popups, a breakpoint event for automatic collapsing, reverseArrow for a right-hand sider, collapsedWidth=0 for a zero-width trigger, and light or dark themes. RTL works through ConfigProvider direction="rtl". Active state comes from selectedKeys, which your app maps from the route. The library’s latest stable release is still 4.2.6 from November 2024.

Choose it if you maintain an antdv admin and need popup submenus in collapsed mode.

CoreUI CSidebar for Vue

Our own entry. CoreUI Sidebar for Vue is free (MIT) in @coreui/vue. narrow gives an icon rail, unfoldable makes the sidebar narrow and expands it on hover, overlaid floats it over content, and below the mobile breakpoint it hides by default and opens over a backdrop that closes on outside click or after following a link. It has header, brand, scrollable nav and footer regions, placement="start" or "end", colorScheme="dark" independent of the page, and multi-level CNavGroup navigation with a tree variant, where setting a link active expands its parent group. visible plus the visible-change event make it fully controllable.

What it lacks, from our docs and source: saved collapse state, a keyboard shortcut, resizing and flyout submenus in narrow mode. CLink accepts as="RouterLink", but the docs show no vue-router example. RTL is documented only in the CoreUI for Bootstrap docs, and the full page scaffold comes from our admin templates (pricing).

Choose it if you want hover-expand and automatic mobile behaviour as props in a Bootstrap-styled Vue app.

The 2026 picture

PrimeVue 5 (since 15 July 2026) introduced the navigation Sidebar and moved to the PrimeUI License: free only for companies under $1M revenue, five developers, ten employees and $3M funding, otherwise $599 per developer until 31 December 2026, then $799. PrimeVue 4.5.5 remains MIT.
Vuetify 4 is current (4.3.1); 3.13.7 continues as v3-stable.
Ant Design Vue has gone almost two years without a stable release (4.2.6, 11 November 2024).

FAQ

Vuetify’s VNavigationDrawer: rail, expand on hover, automatic mobile overlay, vue-router support and a layout system, all MIT. If your app is not Material-styled, CoreUI CSidebar offers the same core modes as props on Bootstrap styling.

Which Vue sidebars open submenus as popups when collapsed?

Ant Design Vue (inlineCollapsed menus), Element Plus (ElMenu collapse mode) and Naive UI (NMenu with dropdown-props). In Vuetify’s rail mode the docs say only the first element inside v-list stays visible.

No. In PrimeVue 5 “Sidebar” is a new application navigation component with icon, offcanvas and overlay modes; the older slide-in panel is called Drawer.

Vuetify (“RTL support is built in”), Quasar (via postcss-rtlcss), PrimeVue (all components through dir="rtl") and Ant Design Vue (ConfigProvider direction). CoreUI documents RTL in its Bootstrap docs, and the Vue sidebar styles use logical start and end placement.