Drawer

Overlay
Layout

Slide-in panels from any edge of the screen for navigation and actions.

Preview

Click any button to open a drawer from different sides

Size Variants

Different drawer sizes for different use cases

Props

Component API reference

PropTypeDefaultDescription
position'left' | 'right' | 'top' | 'bottom''right'Position of the drawer
size'sm' | 'md' | 'lg' | 'full''md'Drawer width/height
trigger*ReactNode—Trigger element (usually a button)
titlestring—Drawer title
descriptionstring—Drawer description
showClosebooleantrueShow close button
childrenReactNode—Drawer content

Usage

Import and implementation examples

import { Drawer } from '@/components/ui/drawer'
import { Button } from '@/components/ui/button'
import { Menu } from 'lucide-react'

<Drawer
  position="left"
  title="Navigation"
  description="Browse your workspace"
  trigger={
    <Button variant="inverse">
      <Menu className="w-4 h-4" />
      Open Menu
    </Button>
  }
>
  <div className="space-y-4">
    <p>Drawer content goes here</p>
  </div>
</Drawer>

// Different sizes
<Drawer position="right" size="sm" title="Small" trigger={<Button>Small</Button>}>
  <p>Small drawer content</p>
</Drawer>

<Drawer position="right" size="lg" title="Large" trigger={<Button>Large</Button>}>
  <p>Large drawer content</p>
</Drawer>

// Without close button
<Drawer position="bottom" showClose={false} trigger={<Button>Bottom</Button>}>
  <p>Bottom drawer without close button</p>
</Drawer>

Features

Built-in functionality

  • Four positions: Left, right, top, and bottom
  • Responsive sizes: Small, medium, large, and full width/height
  • Smooth animations: Slide in/out with backdrop fade
  • Focus trap: Keyboard focus stays within drawer
  • ESC to close: Press Escape to dismiss
  • Backdrop click: Click outside to close
  • Scrollable content: Overflow handling for long content
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

role="dialog" for drawer containeraria-modal="true" when openaria-labelledby for titlearia-describedby for description

Keyboard Navigation

KeyAction
EscapeClose drawer
TabNavigate between elements
Shift+TabNavigate backwards

Notes

  • Focus trapped within drawer when open
  • Focus returns to trigger on close
  • Screen reader announces drawer content

Related Components

SheetDialogSidebar