Sidebar

A Vuetify-style navigation drawer with four modes — permanent (always visible, pushes content), temporary (overlay drawer with scrim + Escape), rail (mini collapsed, optional expandOnHover), and auto (responsive: permanent on ≥ 768 px viewports, temporary below). Anchors left or right, three densities, three variants, seven colors. Three named slots — header, default (body), footer — designed to host a future <mono-menu> in the body. Writes its width to --mono-sidebar-{left,right}-width on :root so layout wrappers can pad themselves. Demos use the contained prop to position absolutely inside a scoped preview pane. Toggle Vue / CSS to switch the live demo and source together.

Permanent

Always-visible sidebar that pushes the main content area to the side.

Vue SFC

Temporary

Drawer-style sidebar with scrim — Escape, scrim-click, or close button dismiss.

Vue SFC

Rail

Mini collapsed sidebar (icons only); toggle expands to full width.

Vue SFC

Rail · expand on hover

Rail mode that auto-expands while the cursor is over it.

Vue SFC

Rail · manual control

Bind :rail to your own state and toggle it from any external button. The default chevron is hidden when the prop is provided.

Vue SFC

Location

Anchor left or right.

Vue SFC

Colors

Six themed accents plus the white surface default.

Vue SFC

Variants

flat (no shadow), elevated (shadow), outlined (border).

Vue SFC

With nav list

Sidebar housing a brand header, nav list, and footer — the typical app-shell composition.

Vue SFC

With iconify icons

Sidebar nav using mono-menu with i-mdi-* iconify classes — paints SVG masks via currentColor.

Vue SFC

Customized

Override per-element styling via cssClass (Vue) or utility classes (CSS).

Vue SFC