Layout

SidebarToggle

A ghost icon button that collapses and expands a `Sidebar`, with the icon following the state so it always shows which way the click will go. Stateless: bind `v-model` to whatever owns the open state. `Sidebar` renders one in its header, and the same component works standalone in a navbar.

vue
<UiSidebarToggle />

Options

One block per prop — what it does, and what it looks like set.

Model value

modelValue is whether the sidebar this controls is expanded, bound two-way with v-model. The toggle keeps no state of its own — it renders the one you give it and asks for the other, which is what lets the sidebar's own header button and a second one in a navbar drive one sidebar without either being the source of truth.

Sidebar is expanded

The toggle holds no state — it renders the modelValue you give it and emits the opposite. That's what lets Sidebar's own rail tab and a second toggle in a navbar drive one sidebar: both bind the same ref, and neither is the source of truth.

Side

side is which edge the sidebar being toggled sits on, and all it does is flip which way the icon's chevron points — a right-hand sidebar collapses to the right, so that's the direction the button has to promise. Both buttons below share one state; only the glyph differs.

left / right, sidebar is expanded

Size

size scales the button to sit alongside whatever else is in the bar — the same sm/md/lg steps Button takes, since that's what it renders. Sidebar renders the one in its header at the default md.

It renders a Button with variant="ghost" rather than restyling one from scratch, so it inherits that component's sizing, focus and disabled behavior — and anything Button accepts falls through to it, class included.

Icon

icon pins the glyph instead of letting it follow the state. By default it swaps between sidebarClose and sidebarOpen so it always shows which way the click will go — override it when you'd rather the control read as one steady thing, the way a hamburger does.

Same state, fixed icons

Label

label is the accessible name. It defaults to "Collapse sidebar" or "Expand sidebar" depending on the current state, which is already the right thing for a sidebar toggle — set it when the panel is called something else in your app, so the button and the panel match.

Announces as "Hide filters"

Disabled

disabled pins the sidebar where it is — for a layout that has to stay expanded on a wide screen, or a panel that shouldn't be dismissed mid-task.


Examples

The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.

Driving a `Sidebar` from a navbar — the same state, two controls

Sidebar renders one of these in its own header, but nothing stops a second toggle elsewhere from sharing the state. Both read open, both write it, and neither one has to know the other exists.

Dashboard

One state, two controls


API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
boolean
true
Whether the sidebar this controls is expanded. Bind it with `v-model` — the toggle renders the state and asks for the other one, it doesn't keep any state of its own.
"left" | "right"
'left'
Which edge the sidebar being toggled sits on. Flips which way the default icon points, since a right-hand sidebar collapses toward the right.
"sm" | "md" | "lg"
'md'
The size of the button.
string
—
Overrides the icon, which otherwise switches between `sidebarClose` and `sidebarOpen` to show which way the click will go.
string
—
The accessible name. Defaults to "Collapse sidebar" or "Expand sidebar" depending on the current state.
boolean
false
Disables the toggle.

Slots

Slot
default
Receives `{ open }`.

Emits

Event
Payload
Description
update:modelValue
[value: boolean]
—