Drawer

Purpose

The Drawer is a sliding panel that overlays the current page from one edge of the viewport. It is designed for tasks that are contextually related to the page but require enough space to warrant a dedicated panel — filtering search results, viewing booking details, adjusting preferences, or completing a short sub-task.

Unlike a Modal, the Drawer does not demand full attention before the user can continue. The backdrop is present but the underlying page remains partially visible, signalling that the user can return to it easily.

Usage

Use a Drawer for:

• Filter panels on search results and destination listing pages
• Booking detail side panels triggered from an itinerary list
• Settings and preference panels (e.g. currency, language)
• Mobile navigation menus (use side='left') — this is how MegaMenu implements its mobile nav
• Quick-add or edit forms that do not require a full page

Do not use a Drawer for:

• Critical confirmations that must block all interaction — use Modal instead
• Content that could live inline on the page without disrupting the user's flow
• Full multi-step journeys — those belong on dedicated pages
• Content above 480px wide on mobile — consider a bottom-sheet (side='bottom') instead

Anatomy

Variants

Right drawer (default)

Slides in from the right. The most common configuration — used for filter panels and detail views on desktop.

const [open, setOpen] = useState(false);

<button onClick={() => setOpen(true)}>Open filters</button>
<Drawer
  open={open}
  onClose={() => setOpen(false)}
  title="Filter results"
  side="right"
  footer={
    <>
      <Button variant="primary" fullWidth>Apply filters</Button>
      <Button variant="ghost" fullWidth onClick={() => setOpen(false)}>Clear all</Button>
    </>
  }
>
  <FilterForm />
</Drawer>

---

Left drawer

Slides in from the left. Commonly used for mobile navigation menus or site-level settings panels.

<Drawer
  open={open}
  onClose={() => setOpen(false)}
  title="Menu"
  side="left"
  width="sm"
>
  <nav>
    <a href="/destinations">Destinations</a>
    <a href="/holiday-types">Holiday Types</a>
    <a href="/about">About Kuoni</a>
  </nav>
</Drawer>

---

Bottom drawer

Slides up from the bottom edge. Best suited for mobile contexts where a side panel would be too narrow, or for quick-action sheets.

<Drawer
  open={open}
  onClose={() => setOpen(false)}
  title="Sort by"
  side="bottom"
>
  <ul>
    <li>Price: low to high</li>
    <li>Price: high to low</li>
    <li>Most popular</li>
  </ul>
</Drawer>

States

Closed

When open={false}, the Drawer and its backdrop do not render. The portal is unmounted. No content is present in the DOM.

Opening

When open transitions from false to true, the panel animates in via a CSS translate transition (300ms ease-in-out). The backdrop fades in simultaneously. Focus moves to the first focusable element inside the panel.

Open

The panel is fully visible. The backdrop is interactive. Body scroll is locked. Focus is trapped inside the panel. Pressing Escape calls onClose.

Closing

When open transitions to false, the panel animates out. After the transition completes, the portal is unmounted and focus returns to the element that triggered the Drawer.

Width sizes

The width prop applies only when side is 'right' or 'left'. When side='bottom', the panel spans the full viewport width.

Best practices

Props

Accessibility

Dialog role and ARIA

The Drawer panel uses role="dialog" with aria-modal="true" and is labelled by its title:

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="drawer-title"
>
  <h2 id="drawer-title">Filter results</h2>
  ...
</div>

• role="dialog" announces the panel to screen readers as a dialog
• aria-modal="true" instructs screen readers to restrict their virtual cursor to the panel's content
• aria-labelledby connects the title element — screen readers announce the title when focus enters

Portal and document structure

The Drawer renders into document.body via createPortal. This means the panel appears outside the normal React tree in the DOM, which is intentional — it ensures the panel and backdrop always overlay all other content regardless of stacking context.

import { createPortal } from 'react-dom';

// Inside the Drawer component:
return createPortal(
  <div> {/* backdrop + panel */} </div>,
  document.body
);

Because of this, the Drawer cannot be rendered in a Node.js server environment (static build, SSR without a browser). Always guard with a typeof window !== 'undefined' check or use useEffect to mount the portal after hydration.

Focus management

When open becomes true:

1. Focus moves to the first focusable element inside the panel (usually the close button or the first form field)
2. Tab key cycles through focusable elements within the panel — focus cannot leave

When open becomes false:

1. Focus returns to the element that triggered the Drawer
2. Store a ref to the trigger to handle this reliably:

const triggerRef = useRef(null);

<button ref={triggerRef} onClick={() => setOpen(true)}>
  Open filters
</button>
<Drawer open={open} onClose={() => setOpen(false)} title="Filters">
  ...
</Drawer>

Body scroll lock

When the Drawer opens, overflow-hidden is applied to document.body. This prevents the background page from scrolling while the panel is active. The style is removed when the Drawer closes.

Keyboard interaction

Related components

• Modal — use instead of Drawer when the task must block all interaction with the page behind it.
• MegaMenu — uses Drawer (side='left') for its mobile navigation pattern.