logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.11.5
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • FlexNew
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic
Custom Placement
Extra Actions
Render in current dom
Submit form in drawer
Preview drawer
Multi-level drawer
Preset size
Customize className for build-in module
API
Design Token

Drawer

    • AlertMessage

    Resources

    Ant Design Charts
    Ant Design Pro
    Ant Design Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuqueAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    GalaceanGalacean-Interactive Graphics Solution
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    A panel which slides in from the edge of the screen.

    When To Use

    A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.

    • Use a Form to create or edit a set of information.
    • Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
    • When the same Form is needed in multiple places.

    Examples

    API

    Common props ref：Common props

    🚨 Note: v5 use rootClassName & rootStyle to config wrapper style instead of className & style in v4 to align the API with Modal.

    PropsDescriptionTypeDefaultVersion
    autoFocusWhether Drawer should get focused after openbooleantrue4.17.0
    afterOpenChangeCallback after the animation ends when switching drawersfunction(open)-
    classNameConfig Drawer Panel className. Use rootClassName if want to config top dom stylestring-
    classNamesConfig Drawer build-in module's classNameheader?: string; body?: string; footer?: string; mask?: string; wrapper?: string;-
    stylesConfig Drawer build-in module's styleheader?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; wrapper?: CSSProperties;-5.10.0
    closeIconCustom close icon. 5.7.0: close button will be hidden when setting to null or falseboolean | ReactNode<CloseOutlined />
    contentWrapperStyleStyle of the drawer wrapper of content partCSSProperties-
    destroyOnCloseWhether to unmount child components on closing drawer or notbooleanfalse
    extraExtra actions area at cornerReactNode-4.17.0
    footerThe footer for DrawerReactNode-
    forceRenderPre-render Drawer component forciblybooleanfalse
    getContainermounted node and display window for DrawerHTMLElement | () => HTMLElement | Selectors | falsebody
    headerStyleStyle of the drawer header partCSSProperties-
    heightPlacement is top or bottom, height of the Drawer dialogstring | number378
    keyboardWhether support press esc to closebooleantrue
    maskWhether to show mask or notbooleantrue
    maskClosableClicking on the mask (area outside the Drawer) to close the Drawer or notbooleantrue
    placementThe placement of the Drawertop | right | bottom | leftright
    pushNested drawers push behaviorboolean | { distance: string | number }{ distance: 180 }4.5.0+
    rootStyleStyle of wrapper element which contains mask compare to styleCSSProperties-
    styleStyle of Drawer panel. Use bodyStyle if want to config body onlyCSSProperties-
    sizepreset size of drawer, default 378px and large 736px'default' | 'large''default'4.17.0
    titleThe title for DrawerReactNode-
    openWhether the Drawer dialog is visible or notbooleanfalse
    widthWidth of the Drawer dialogstring | number378
    zIndexThe z-index of the Drawernumber1000
    onCloseSpecify a callback that will be called when a user clicks mask, close button or Cancel buttonfunction(e)-

    Design Token

    Component TokenHow to use?

    Token NameDescriptionTypeDefault Value
    footerPaddingBlockVertical padding of footernumber8
    footerPaddingInlineHorizontal padding of footernumber16
    zIndexPopupz-index of drawernumber1000

    Global TokenHow to use?

    Basic

    Basic drawer.

    expand codeexpand code
    Extra Actions

    Extra actions should be placed at corner of drawer in Ant Design, you can use extra prop for that.

    expand codeexpand code
    Submit form in drawer

    Use a form in Drawer with a submit button.

    expand codeexpand code
    Multi-level drawer

    Open a new drawer on top of an existing drawer to handle multi branch tasks.

    expand codeexpand code
    Customize className for build-in module

    Set the className of the build-in module (header, body, footer, mask, wrapper) of the drawer through the classNames.

    expand codeexpand code
    Custom Placement

    The Drawer can appear from any edge of the screen.

    expand codeexpand code
    Render in this
    Render in current dom

    Render in current dom. custom container, check getContainer.

    Note: style and className props are moved to Drawer panel in v5 which is aligned with Modal component. Original style and className props are replaced by rootStyle and rootClassName.

    When getContainer returns a DOM node, you need to manually set rootStyle to { position: 'absolute' }, see #41951.

    expand codeexpand code

    • Lily

      Progresser XTech
      • View Profile

    • Lily

      Progresser XTech
      • View Profile
    Preview drawer

    Use Drawer to quickly preview details of an object, such as those in a list.

    expand codeexpand code
    Preset size

    The default width (or height) of Drawer is 378px, and there is a preset large size 736px.

    expand codeexpand code