Sidebar

collapsible is how the sidebar gets out of the way. Its default, icon, shrinks it to an icon-only strip that still navigates; offcanvas hides it altogether; none fixes it open and drops the toggle entirely. The header, default and footer slots are all handed the current state, which is how the content below knows to render labels or not — click the toggle in the header, or drag the edge, to see it.

side moves the sidebar to the other edge of the screen. The header toggle's icon, the resize handle and the collapse direction all mirror along with it.

resizable puts a ResizeHandle down the full height of the sidebar's edge, so a width drag can start anywhere along it. Off, the sidebar keeps exactly the widths you gave it — defaultWidth expanded, the icon strip collapsed — which is what the sidebar below does.

open takes the expanded/collapsed state out of the sidebar's hands. Bind it with v-model:open so the header toggle still works, or turn the built-in controls off and drive it entirely from elsewhere — which is the pairing below: close is false, and a SidebarToggle sitting outside the sidebar shares the same ref. Same component the header renders, just somewhere else.

defaultOpen decides whether an uncontrolled sidebar starts expanded. It's true by default; set it false for a shell where the content is the point and the navigation is something you go looking for. Once the reader touches the toggle the sidebar owns the state, so this only ever describes the first render.

title is the name in the built-in header, shown instead of the default logo. It's ignored the moment you provide a header slot, which replaces that whole area — reach for the prop when a line of text is all you need, and the slot when the header has to hold a team switcher.

description is the quieter second line under the title — the workspace, the environment, whatever qualifies the name above it. Both collapse away with the sidebar. The title and description slots below keep this header layout while replacing just the text, which is the middle ground between the props and the full header slot.

close is the SidebarToggle in the header, and it's on by default — it's the sidebar's only built-in way to collapse and expand. Turn it off and the sidebar can still be driven through v-model:open from a control of your own. It does nothing at all when collapsible is none, since there's then nothing to collapse to.

defaultWidth is the pixel width the sidebar opens at. It's a starting point rather than a fixed size — the resize handle drags it anywhere between minWidth and maxWidth from there, and a double-click on the handle puts it back.

minWidth is how narrow the resize handle can drag the sidebar. Set it to the width your narrowest label still fits in — dragging further doesn't squeeze past it, and pushing well beyond the bound snaps the sidebar collapsed instead, so the reader gets the icon strip rather than a cramped one.

maxWidth is the other bound — how wide the resize handle can pull the sidebar before it stops. Keep it modest: past a point the sidebar is just taking room from the content, and dragging hard past the bound only stops, rather than growing further.

The two ready-made pieces that bookend an app sidebar. Both take the sidebar's state straight from the slot and collapse with it, and both run ghost here — the sidebar card is already a surface, so a second one inside it would only add edges.

Nuxt

JD

Jane DoeOnline

Show code

Source: app/components/examples/DashboardSidebar.vue.