Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Default
    • Configuration
    • API
      • Drawer

    Drawer

    A Drawer is a container for supplementary content that is anchored to the edge of a page.


    Table of Contents
    • How to use it
      • Default
    • Configuration
    • API
      • Drawer

    Used for this
    • To display information or actions that are supplementary to the screen’s primary content
    • To display a list of actions that affect the screen’s content, such as filtering data

    How to use it

    Default

    When the Drawer opens, focus moves to it so users who rely on a keyboard and/or screen reader can access the content within. Focus is kept in the Drawer until it is dismissed.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Configuration

    • Name9.5.3•View source•View on npm
    • Installnpm install @zendeskgarden/react-modals
    • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
    • Importimport { Drawer } from '@zendeskgarden/react-modals'

    API

    Drawer

    Extends HTMLAttributes<HTMLDivElement>

    Prop nameTypeDefaultDescription
    appendToNode
    Element

    Defines the DOM element that the modal will attatch to

    backdropProps
    HTMLAttributes<HTMLDivElement>

    Passes HTML attributes to the backdrop element

    focusOnMount
    boolean
    true

    Directs keyboard focus to the modal on mount

    isOpen
    boolean

    Opens the modal

    onClose
    ((event: KeyboardEvent<Element> | MouseEvent<Element, MouseEvent>) => void)

    Handles close actions. Can be triggered from the backdrop and from the close icon.

    Parameters
    event

    The DOM event that triggered the close action

    restoreFocus
    boolean
    true

    Returns keyboard focus to the element that triggered the modal

    Drawer.Body

    Extends HTMLAttributes<HTMLDivElement>

    Drawer.Close

    Extends ButtonHTMLAttributes<HTMLButtonElement>

    Drawer.Footer

    Extends HTMLAttributes<HTMLDivElement>

    Drawer.FooterItem

    Extends HTMLAttributes<HTMLSpanElement>

    Drawer.Header

    Extends HTMLAttributes<HTMLDivElement>

    Prop nameTypeDefaultDescription
    tag
    any
    div

    Updates the element's HTML tag

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2025