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 rail 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 or drag the rail on the edge to see it.

side moves the sidebar to the other edge of the screen. The rail and its collapse direction mirror along with it.

rail is the strip on the sidebar's edge that both toggles it (click) and resizes it (drag). Turning it off leaves the sidebar collapsible in principle but with no built-in way to do it, so pair a false rail with v-model:open and a control of your own. It never renders at all when collapsible is none, which is what the example below shows.

open takes the expanded/collapsed state out of the sidebar's hands. Bind it with v-model:open so the rail still works, or pass it one way to pin the sidebar and drive it entirely from elsewhere — which is the pairing below, where rail is off and the button is the only way through.

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 rail 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 adds a close button to the header's actions area that collapses the sidebar. It's a second route to what the rail already does, worth adding where the rail is easy to miss; 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 rail handle can drag it anywhere between minWidth and maxWidth from there.

minWidth is how narrow the rail 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 rail 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 snaps it fully expanded rather than growing further.

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