Drawer

A side-anchored overlay panel that slides in from any of the four edges. Use it for detail views, filter panels, or contextual forms that don't deserve a full route. Bind open (or use the model-value alias) to control visibility, listen to mno-toggle for state changes, and pick the slide direction with position. Toggle Vue / CSS to switch the live demo and source together.

Basic

Default right-side drawer with a header, body, and close button.

Vue SFC

Positions

Slide in from left, right, top, or bottom.

Vue SFC

Sizes

Five sizes from sm to full width / height.

Vue SFC

Colors

Six accent colors threaded through the head and scrollbar.

Vue SFC

Header & footer slots

Custom header and footer content via slots.

Vue SFC

Persistent

Overlay click and Escape are ignored — only the close button or programmatic hide() will dismiss.

Vue SFC

No overlay

Side panel without a backdrop — page behind stays interactive.

Vue SFC

Event log

Live log of mno-toggle events with source (overlay / close / escape / manual).

Vue SFC

Customized

Per-element overrides via cssClass (Vue) or utility classes (CSS).

Vue SFC