MeDo

AI Drawer Generator.

A drawer slides in over or beside your page without throwing it away — and which of its three jobs you mean changes everything about how it should behave. Describe the intent and MeDo generates the right one: a modal slide-over that traps attention, a non-modal inspector that keeps the page clickable, or the mobile navigation container — with ESC, focus, and overlay behavior matched to each.

Drawer
Drawer

A Drawer Is Defined by What It Refuses to Throw Away: the Page Behind It

A modal dialog blackouts the context and demands a decision; a drawer slides over only part of it and lets the page keep breathing underneath — which is why the pattern exists at all. Its three jobs divide by exactly how much that surviving context matters. As a modal slide-over for settings or details, the page is visible for orientation but inert: overlay, focus trap, Escape. As a non-modal inspector — hover a row, open details beside it, keep working — the page stays fully live, so there is no overlay, no trap, and Escape should not even close it. As a mobile navigation container, the drawer is simply the only place a nav can live once the viewport is 375px wide, and it behaves modally because navigating away is the whole task. The failures come from using one behavior for all three: an inspector with a focus trap that will not let you keep typing in the table, a settings drawer with no overlay that lets clicks fall through to buttons you cannot see, a nav drawer without scroll lock that scrolls the page behind it. Name the job in the prompt; the behavior follows from it.

4 plantillas

Plantillas de Drawer que puedes generar

Cada plantilla es un prompt real, no una captura de pantalla. Cópialo en cualquier editor de IA o ejecútalo en MeDo y obtén código React + Tailwind.

ModalSettings Slide-Over

Right-Edge Settings Drawer

The workhorse: overlay, focus trap, Escape and overlay-click to close, sticky footer. The page stays visible for orientation but inert.

Create a right-edge modal slide-over for settings: 420px wide, sliding from the right over 250ms ease-out with a 40% black overlay fading behind it. role="dialog" with aria-modal="true" and aria-labelledby to the title, focus moves to the close button on open, Tab is trapped inside, Escape and overlay click both close and restore focus to the trigger. Lock body scroll with scrollbar-width compensation so the page does not shift. Structure: header with title and close icon, scrollable body with three labeled sections, sticky footer with Cancel and Save pinned at the bottom. On viewports under 640px, the drawer is full-width stopping 24px short of the left edge so the page peeks through. Animate transform only, honor prefers-reduced-motion, close on route change, and unsaved-changes guard that asks before closing while the form is dirty.

Prueba en MeDo
InspectorNon-Modal Inspector

Details Panel That Keeps the Page Live

No overlay, no focus trap, page fully clickable — select a row, read the details beside it, click another row and the panel swaps content.

Create a non-modal inspector drawer docked to the right on desktop: 400px wide, part of the layout flow rather than overlaying — it slides in and the adjacent content reflows rather than dimming. No overlay, no focus trap, no scroll lock; the table beside it remains fully interactive, and clicking a different row updates the inspector content in place without closing. Escape does not close this panel — only its explicit close button or a selection change does. Include a small header with the item name and a close icon, a scrollable details body, and two quick actions. On mobile it degrades to a bottom sheet covering 70% height with a drag handle, snap points at 70% and 95%, and swipe-down to dismiss. Announce content changes with aria-live polite on the panel title.

Prueba en MeDo
NavigationMobile Nav Drawer

Hamburger Navigation Container

Where the desktop sidebar goes below 768px: modal, scroll-locked, and it closes itself on navigation because leaving is the whole task.

Create a mobile navigation drawer that opens from a hamburger button below 768px: full-height, 85% viewport width anchored left, sliding in over 200ms with a 40% overlay. Contains the same link list as the desktop sidebar plus the primary action button, with the current route marked by aria-current="page" and a tinted background. Lock body scroll while open, trap focus, close on Escape, overlay tap, and — most importantly — on every link tap before the route change, with focus returned to the hamburger. Support swipe-left to dismiss and add a subtle active-route indicator bar on the left of the current link. Below the links add a secondary group for account and logout. Prevent the drawer from rendering at all on desktop viewports so no hidden duplicate of the nav exists in the DOM.

Prueba en MeDo
MobileBottom Sheet

Bottom Sheet With Snap Points

The mobile-native drawer direction: rises from the bottom with a drag handle and snap points, for filters, pickers, and forms on touch screens.

Create a bottom-sheet drawer for mobile: rises from the bottom edge with a 150ms ease-out, rounded top corners, and a 36px drag-handle pill centered at the top. Modal with a 40% overlay, focus trap, Escape and overlay-tap to close, body scroll locked with overscroll containment. Two snap points at 50% and 90% of viewport height with the handle draggable between them and swipe-down past 50% dismissing with velocity awareness. Content: a filter form with a sticky header showing a live result count and a sticky bottom row with Reset and Apply buttons. While dragging, pause the sheet body scroll and resume it at a snap point; respect reduced motion by snapping without animation. On screens wider than 768px, offer a fallback rendering as a right-edge slide-over instead.

Prueba en MeDo

Cómo personalizar tu Drawer

Name the job before the dimensions

Say which of the three you are building: modal slide-over (overlay, focus trap, Escape closes), non-modal inspector (no overlay, page stays interactive, close is explicit), or mobile nav (modal, scroll-locked, closes on navigation). Widths and sides are trivial to change later; the interaction contract is not.

Animate transform, not width, and keep the exit as fast as the entry

Animating translate-x keeps the slide on the compositor at 60fps, while animating width relayouts the page every frame. Ask for 200–300ms ease-out on open and 150–200ms on close — drawers that dawdle on exit feel broken because the user has already decided to leave.

Lock body scroll without the layout jump

Setting overflow hidden on the body removes the scrollbar and shifts the whole page a few pixels — visible on every centered layout. Request scrollbar-width compensation or overscroll containment in the prompt, and confirm the page behind does not jump when the drawer opens.

On mobile, leave the page peeking

A full-bleed drawer looks like a page change; one that stops 16–24px short of the opposite edge keeps a strip of the underlying screen visible and quietly tells the user this is a layer they can dismiss. On tablets consider a peek of the list itself, not just the background.

Quién usa el componente Drawer

SaaS settings and detail panels

A right-edge slide-over for editing a record or workspace settings: the list stays visible behind for orientation, the form gets the full height of the viewport, and saving returns you exactly where you were — no navigation, no lost scroll.

E-commerce cart slide-over

Cart as a right drawer instead of a cart page: add an item, the drawer slides over, the product grid is still visible behind, and checkout is one button away. Removing the round-trip measurably lifts add-to-cart conversion.

Mobile app navigation

The hamburger nav drawer at small viewports: full-height, modal, scroll-locked, closing automatically on link tap. Below 768px this is where the desktop sidebar's content goes.

Email and CRM inspectors

A non-modal side panel that opens beside the inbox or table: select a message, read it in the drawer, keep the list interactive — click another row and the inspector swaps its content without closing.

Patrones de Drawer para distintos sitios web

El mismo componente drawer, adaptado al tipo de sitio donde se publica.

01 / 06

SaaS Dashboards

Record details and settings in right-edge slide-overs instead of detail routes: the list stays for context, saving keeps scroll position, and power users work through records without ever losing the table.

Estilos y variantes de Drawer

Elige la variante que encaje con el resto de la página y genérala.

01 / 05

Classic Right Slide-Over

Right edge, 400–500px, overlay, rounded-none or a barely rounded left corner. Reads as an extension of the page rather than a popup, which is why settings and details default to it.

Drawer en React, Next.js, Vue y Svelte

React, Next.js, Vue 3, SvelteKit, Astro o HTML puro: el mismo drawer, seis formas de integrarlo.

01 / 03

React Drawer

Mounted-but-translated is the key trick: keeping the panel in the DOM with a translate class lets CSS run the enter and exit, while focus and Escape live in an effect keyed on open.

src/components/Drawer.tsx

function Drawer({ open, onClose, title, children }) {
  const ref = useRef(null)

  useEffect(() => {
    if (!open) return
    ref.current?.querySelector('button')?.focus()
    const onKey = (e) => e.key === 'Escape' && onClose()
    window.addEventListener('keydown', onKey)
    document.body.style.overflow = 'hidden'
    return () => {
      window.removeEventListener('keydown', onKey)
      document.body.style.overflow = ''
    }
  }, [open, onClose])

  return (
    <div className={open ? 'fixed inset-0 z-50' : 'hidden'}>
      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
      <aside ref={ref} role="dialog" aria-modal="true" aria-label={title}
        className="absolute right-0 top-0 h-full w-[420px] bg-white shadow-2xl
                   transition-transform duration-250 translate-x-0">
        {children}
      </aside>
    </div>
  )
}

Cómo añadir tu Drawer a un proyecto

Cuatro pasos, desde elegir una plantilla de drawer hasta llevarlo a producción.

01~1min

Decide which of the three jobs yours does

Modal slide-over, non-modal inspector, or mobile nav container — this determines overlay, focus trap, Escape, and scroll lock in one stroke. Getting the intent right in the prompt is the difference between the variants; getting it wrong means regenerating the interaction, not the styling.

02~10s

Generate with the behavior spelled out

Paste the matching template prompt and adjust width, side, and content sections. Say explicitly whether the page behind stays interactive, whether body scroll locks, and what closes the drawer — these are the parts generic prompts miss.

03~3min

Refine the content and the edges

Add the sticky footer, unsaved-changes guard, reduced-motion fallback, and mobile variant as follow-up messages. If it is an inspector, ask for in-place content swapping when the underlying selection changes.

04~4min

Test focus, scroll, and dismissal

Open it, Tab in circles to confirm focus is trapped (or free, for an inspector), press Escape and confirm focus returns to the trigger. Check the page does not jump from scroll locking, and that every dismissal path — close button, overlay, swipe — works with a half-filled form inside.

Preguntas frecuentes sobre Drawer

When should I use a drawer instead of a modal?

Use a modal when the task should cut all ties with the page — confirmations, destructive actions, short forms that need total attention. Use a drawer when the page behind is still useful: the user may need to peek at a record, compare a value, or simply keep their place. The drawer says "this is a layer over your current work"; the modal says "stop everything". If you find yourself writing a modal that contains a long form or a scrolling list, it usually wants to be a drawer — and if the task is genuinely blocking and short, the drawer is an over-engineered modal.

How is a drawer different from a sidebar?

Persistence. A sidebar is a permanent region of the layout — it owns its space at every viewport size, participates in the grid, and never overlays content. A drawer is temporary — it appears on demand, overlays or squeezes the page, and disappears. The relationship between them is usually sequential: as the viewport shrinks, the persistent sidebar collapses into a hamburger that opens a drawer containing the same links. Design them together, and see the MeDo sidebar page for the persistent half of that pair.

Should Escape close my drawer?

Depends entirely on which of the three jobs it is doing. Modal drawer: yes — Escape, overlay click, and an explicit close button should all close it, and focus returns to the trigger. Non-modal inspector: no — Escape belongs to the page underneath (clearing a table selection, exiting a search), and the inspector closes only by its own close control or by selection change. Mobile nav drawer: yes, Escape on hardware keyboards plus swipe-to-dismiss and tap-outside. State which one you want in the prompt, because this single decision is the difference between the variants.

Should the drawer have an overlay backdrop?

If it is modal, yes — the overlay is what makes the page behind inert and communicates layering; at 40% black it is readable, not theatrical. If it is a non-modal inspector, no overlay at all: the defining feature is that the page stays clickable, and an overlay would silently convert your inspector into a modal. A middle option for wide screens is no dark overlay but a click-away catcher — clicks outside close it, yet the page remains visually fully visible.

How wide should a slide-over drawer be?

Content-first, within 360–540px for a form or detail panel: narrow enough to leave the page visibly present, wide enough for a two-column form or a reading column. Detail inspectors with a companion list often go wider on desktop — up to a third of the viewport — and mobile drawers are full-width with a small peek. Generate with a width, then audit the worst content: if your longest form section scrolls internally more than a screen, widen rather than shrinking the type.

How do I stop the page scrolling behind a drawer?

On open, set overflow hidden on the body and compensate for the removed scrollbar width so the page does not shift; on mobile, also set overscroll-behavior contain on the drawer body so a swipe at the end of the drawer does not chain-scroll the page. This applies to the modal jobs — nav and slide-over. A non-modal inspector should not lock the page at all, since interacting with the page is the point. MeDo handles both when the prompt says "lock body scroll without layout shift" or "keep the page interactive".

Genera tu drawer ahora.

Prueba cualquier prompt — gratis, sin registro.

Empieza gratisVer precios
Modal

Modal

Describe el diálogo que necesitas y MeDo genera todo el conjunto — encabezado, cuerpo con scroll y pie con acciones, además de captura de foco, restauración del foco al cerrar, bloqueo de scroll del body y una variante bottom sheet para móvil.

Componentes relacionados
Barra lateral

Barra lateral

Describe la barra lateral que necesitas — enlaces de navegación, menús anidados, filtros o widgets — y MeDo genera código limpio y listo para producción en segundos. Sin scaffolding, sin boilerplate.

Componentes relacionados
Barra de navegación

Barra de navegación

Describe tu sitio y obtén una navbar completamente responsiva — con logo, enlaces de navegación, menús desplegables y un menú hamburguesa para móvil — generada desde un único prompt. Sin plantillas, sin complicaciones.

Componentes relacionados
Menú desplegable

Menú desplegable

Describe tus elementos y MeDo genera el menú completo — disparador, panel, secciones agrupadas con separadores, submenús, navegación con flechas y type-ahead, cierre con Escape y clic fuera, y foco que vuelve al disparador al cerrar.

Componentes relacionados