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
Stacked
Set stackable to let drawers stack — open a drawer from inside another, any depth. Each new drawer sits above the previous, only one backdrop dims the screen, and Esc / overlay-click affect only the topmost. Without stackable a drawer is exclusive: opening one closes any other open drawer.
Vue SFC
Z-index
By default the drawer takes its stacking level from mono's shared popup stack, so the newest layer is always on top. Set z-index to pin it instead — for sitting above (or below) something the host app already positions, like a sticky header or a third-party widget. The value is the overlay's level; the panel renders one above it. Accepts z-index="1500", :z-index="1500" and :zIndex="1500".
Vue SFC
Sizes
size sets the content scale — title type, body type, padding and the close icon — across xs, sm, md (default), lg, xl and xxl. The panel keeps the same width at every step.
Changed
size used to be a dimension preset (sm 280px … full 100vw) and only partly affected typography. Use width / height for the panel measure; size="full" is now width="100%" (left/right) or height="100%" (top/bottom).
Vue SFC
Width & height
Set width on a left/right drawer, or height on a top/bottom one — the other axis is pinned to the viewport edge by position. Each accepts a CSS length ("32rem", "60%", "100vw") or a number, read as px.
They are applied as --mono-drawer-width / --mono-drawer-height, the same channel the resize handle writes to, so resizeable keeps working on top of them.
Vue SFC
Auto full-screen
Set auto-fullscreen and the drawer fills the screen on small viewports. It defaults to sm (under 640px); pass md, lg, xl or 2xl to move the boundary. The drawer keeps its position, and a resizeable one hides its handle while full-screen.
Scroll lock
While open, a drawer locks page scroll — lock-scroll, default true. Opt out with :lock-scroll="false" when the page behind should stay scrollable.
vue
<mono-drawer v-model="open" :lock-scroll="false" />The lock is shared, not per-instance: overlapping overlays (a modal opened from a drawer, stacked modals, a sidebar) all draw on one lock, so scroll is released only when the last one that wanted it closes. mono-sidebar takes the same prop.
Resizable
Set resizeable to let users resize the drawer by dragging the handle on the panel's inner edge — width for left/right drawers, height for top/bottom. The size is clamped between a minimum and the viewport.
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
CSS Variables
Vue SFC
Every drawer is themed through --mono-drawer-* custom properties. Because the panel renders through a <body> portal, --mono-drawer-* set inline on the <mono-drawer> element are forwarded to the portal (per-instance theming); you can also set them on :root, and they pierce the shadow-DOM boundary. The size/position/color props set presets, but an explicit --mono-drawer-* override always wins. To re-skin globally, set the underlying --theme-* tokens.
| Variable | Default | Controls |
|---|---|---|
--mono-drawer-accent | --theme-primary | Header/title tint, close, resizer, scrollbar (set by color) |
--mono-drawer-bg | --theme-surface | Panel background |
--mono-drawer-text | --theme-text | Panel text color |
--mono-drawer-border | --theme-border | Panel + head/foot border |
--mono-drawer-head-bg | accent 7% | Header background |
--mono-drawer-foot-bg | accent 4% | Footer background |
--mono-drawer-overlay-bg | rgba(15,25,45,.42) | Backdrop scrim color |
--mono-drawer-width | 420px | Panel width for left/right — not set by size; use the width prop |
--mono-drawer-height | 50vh | Panel height for top/bottom — not set by size; use the height prop |
--mono-drawer-shadow | 0 12px 48px … | Panel shadow |
--mono-drawer-pad-x | 1.4rem | Section horizontal padding (set by size) |
--mono-drawer-z | 9990 | Base z-index (the popup stack overwrites this per level; prefer the z-index prop, and note an inline var still wins over it) |
Types
Import
import { DrawerProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
modelValue | boolean | — | Two-way bound open state of the drawer. |
position | 'left' | 'right' | 'top' | 'bottom' | — | Edge the drawer slides in from. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | — | Sizing scale of the drawer panel. |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | — | Color theme applied to the drawer. |
title | string | — | Heading text shown in the drawer header. |
dismissible | boolean | — | Shows a close button and allows dismissal. |
persistent | boolean | — | Prevents closing via overlay click or escape. |
overlay | boolean | — | Renders a backdrop overlay behind the panel. |
closeOnEscape | boolean | — | Closes the drawer when the Escape key is pressed. |
closeOnOverlay | boolean | — | Closes the drawer when the overlay is clicked. |
lockScroll | boolean | — | Locks page scroll while the drawer is open (default `true`). The lock is shared across overlapping overlays, so it lifts only when the last one closes. |
autoFullscreen | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | boolean | — | Fill the screen at a breakpoint and below (default `false`). `auto-fullscreen` on its own means Tailwind's `sm` (< 640px); a token moves the boundary, so `auto-fullscreen="lg"` covers everything `lg:` does not match (< 1024px). |
resizeable | boolean | — | Allow resizing the drawer by dragging a handle on the panel's inner edge. |
stackable | boolean | — | Allow this drawer to stack on top of others. When false (default) it is exclusive — opening it closes any other open drawers. |
width | string | number | — | Panel dimensions. Each accepts a CSS length string (`"12rem"`, `"80%"`, `"100vw"`) or a number / numeric string (interpreted as px). `width` applies to left/right drawers, `height` to top/bottom ones — the other axis is pinned to the viewport edge by `position`. `width="100%"` (or `height="100%"`) replaces the old `size="full"`. |
height | string | number | — | — |
zIndex | string | number | — | Pin the drawer to an explicit stacking level. Unset (the default) lets the shared popup stack assign one so the newest layer is always on top. The value is the overlay's `z-index`; the panel sits one above it. |
cssClass | DrawerCssClass | — | Per-element class overrides for internal parts. |
cssClassName | string | — | Extra class name applied to the drawer root. |