# Drawer · MIAN

A panel that slides in from the right, left or bottom. Also a native <dialog>.

- Id: `drawer` · Category: Overlays · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/drawer
- Use for: side panel, slide over, filter drawer, mobile menu panel, bottom sheet.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `dialog.mn-drawer`: Right side by default.
- `mn-drawer-left · mn-drawer-bottom`: Other edges.
- `mn-drawer-header · mn-drawer-body · mn-drawer-footer`: Parts.

## Accessibility

- Same guarantees as Modal: focus trap, Escape, inert page, focus return.

## Examples

### Edges

```html
<button class="mn-btn mn-btn-outline" data-mn-open="dr-right">Right</button>
<button class="mn-btn mn-btn-outline" data-mn-open="dr-left">Left</button>
<button class="mn-btn mn-btn-outline" data-mn-open="dr-bottom">Bottom</button>
<dialog class="mn-drawer" id="dr-right">
  <div class="mn-drawer-header"><h2 class="mn-modal-title">Filters</h2><button class="mn-close" data-mn-close aria-label="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button></div>
  <div class="mn-drawer-body mn-stack">
    <label class="mn-check"><input class="mn-checkbox" type="checkbox" checked> In stock</label>
    <label class="mn-check"><input class="mn-checkbox" type="checkbox"> On sale</label>
    <div class="mn-field"><label class="mn-label" for="dr-p">Max price</label><input class="mn-slider" id="dr-p" type="range" value="40"></div>
  </div>
  <div class="mn-drawer-footer"><button class="mn-btn mn-btn-ghost" data-mn-close>Reset</button><button class="mn-btn" data-mn-close>Apply</button></div>
</dialog>
<dialog class="mn-drawer mn-drawer-left" id="dr-left">
  <div class="mn-drawer-header"><h2 class="mn-modal-title">Menu</h2><button class="mn-close" data-mn-close aria-label="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button></div>
  <nav class="mn-drawer-body mn-sidebar" aria-label="Drawer navigation"><div class="mn-sidebar-group">
    <a class="mn-sidebar-link" href="#drawer" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11 12 3l9 8"/><path d="M5 10v10h14V10"/></svg> Home</a><a class="mn-sidebar-link" href="#drawer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 13h5l1.5 2h5L16 13h5"/><path d="M5 5h14l2 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Z"/></svg> Inbox</a><a class="mn-sidebar-link" href="#drawer"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --> Settings</a>
  </div></nav>
</dialog>
<dialog class="mn-drawer mn-drawer-bottom" id="dr-bottom">
  <div class="mn-drawer-body"><h2 class="mn-modal-title">Share</h2><p class="mn-muted">Choose where to send this.</p>
  <div class="mn-row"><button class="mn-btn mn-btn-outline" data-mn-close><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg> Email</button><button class="mn-btn mn-btn-outline" data-mn-close><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg> Copy link</button></div></div>
</dialog>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/drawer/source