Vue Sidebar Component API

Sets if the color of text should be colored for a light or dark background.

Make sidebar narrow.

Set sidebar to overlaid variant.

Components placement, there’s no default placement.

Place sidebar in non-static positions.

Control the open state. When set, the sidebar renders what show says and close gestures only emit update:show — nothing changes until the parent flips the prop.

Size the component small, large, or extra large.

Expand narrowed sidebar on hover.

Toggle the visibility of sidebar component.

Use show / v-model:show instead — visible is ignored when show is set.

Callback fired when the component requests to be hidden.

Event emitted when the sidebar enters or leaves the viewport — the sidebar is off-canvas on narrow screens, so this reports whether it is on screen, not the show state.

Callback fired when the component requests to be shown.

Callback fired when the sidebar requests an open-state change — a close gesture (the mobile backdrop click, an outside click or a nav link selection on mobile) or any internal toggle. When show is bound with v-model, update it yourself, or the sidebar stays as it is.

Event emitted after visibility of component changed.

Component used for the root node. Either a string to use a HTML element or a component.

The href attribute specifies the URL of the page the link goes to.

Component used for the root node. Either a string to use a HTML element or a component.

Make navigation more compact by cutting link padding in half.

Sets the navigation variant.