Drawer

Drawer is a component for a panel that appears from the edge of the screen.

<Drawer.Root>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Usage

import { Drawer } from "@yamada-ui/react"

import { Drawer } from "@/components/ui"

import { Drawer } from "@workspaces/ui"

<Drawer.Root>
  <Drawer.OpenTrigger />
  <Drawer.Content>
    <Drawer.Overlay />
    <Drawer.CloseButton />
    <Drawer.Header />
    <Drawer.Body />
    <Drawer.Footer />
    <Drawer.CloseTrigger />
  </Drawer.Content>
</Drawer.Root>

Drawer.Overlay and Drawer.CloseButton can be omitted.

Change Size

<Wrap gap="md">
  <For each={["xs", "sm", "md", "lg", "xl", "full"]}>
    {(size) => (
      <Drawer.Root key={size} size={size}>
        <Drawer.OpenTrigger>
          <Button>Open "{size}" Drawer</Button>
        </Drawer.OpenTrigger>

        <Drawer.Content>
          <Drawer.Header>ドラゴンボール</Drawer.Header>

          <Drawer.Body>
            『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
          </Drawer.Body>

          <Drawer.Footer>
            <Drawer.CloseTrigger>
              <Button variant="ghost">とじる</Button>
            </Drawer.CloseTrigger>
            <Button>Wikipedia</Button>
          </Drawer.Footer>
        </Drawer.Content>
      </Drawer.Root>
    )}
  </For>
</Wrap>

Change Position

To change the display position, set placement to values like "block-start" or "inline-start". By default, "inline-end" is set.

<Wrap gap="md">
  <For each={["block-start", "inline-start", "inline-end", "block-end"]}>
    {(placement) => (
      <Drawer.Root key={placement} placement={placement}>
        <Drawer.OpenTrigger>
          <Button>Open "{placement}" Drawer</Button>
        </Drawer.OpenTrigger>

        <Drawer.Content>
          <Drawer.Header>ドラゴンボール</Drawer.Header>

          <Drawer.Body>
            『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
          </Drawer.Body>

          <Drawer.Footer>
            <Drawer.CloseTrigger>
              <Button variant="ghost">とじる</Button>
            </Drawer.CloseTrigger>
            <Button>Wikipedia</Button>
          </Drawer.Footer>
        </Drawer.Content>
      </Drawer.Root>
    )}
  </For>
</Wrap>

Change Duration

To change the duration, set duration to a numerical value (seconds).

<Drawer.Root duration={0.7}>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Do Not Block Scroll on Mount

By default, scrolling of the main content is blocked when the panel is opened to ensure accessibility. If you do not want to block the scroll of the main content, set blockScrollOnMount to false.

<Drawer.Root blockScrollOnMount={false}>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Disable the Close Button

To disable the close button, set withCloseButton to false.

<Drawer.Root withCloseButton={false}>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Disable the Overlay

To disable (hide) the overlay of the panel, set withOverlay to false.

<Drawer.Root withOverlay={false}>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Close on drag

If you want to close the Drawer on drag, set closeOnDrag to true.

<Drawer.Root closeOnDrag>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Hide the Drag Bar

To hide the drag bar, set withDragBar to false.

<Drawer.Root closeOnDrag withDragBar={false}>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Customize the Close Button

<Drawer.Root>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.CloseButton colorScheme="red" />

    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Customize the Overlay

<Drawer.Root>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Overlay bg="blackAlpha.300" backdropFilter="blur(10px)" />

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Control

Use open and onClose to control the visibility.

const { open, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Drawer</Button>

    <Drawer.Root open={open} onClose={onClose}>
      <Drawer.Content>
        <Drawer.Header>ドラゴンボール</Drawer.Header>

        <Drawer.Body>
          『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
        </Drawer.Body>

        <Drawer.Footer>
          <Button variant="ghost" onClick={onClose}>
            とじる
          </Button>
          <Button>Wikipedia</Button>
        </Drawer.Footer>
      </Drawer.Content>
    </Drawer.Root>
  </>
)

If you use this code, you need to add "use client" to the top of the file.

Props

Drawer.Root

Prop	Default	Type / Description
`size`	`"lg"`	`"2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "full" \| "lg" \| "md" \| "sm" \| "xl" ...` The size of the component.
`allowPinchZoom`	`false.`	`boolean` Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
`blockScrollOnMount`	`true`	`boolean` If `true`, scrolling will be disabled on the `body` when the drawer opens.
`body`	-	`DrawerBodyProps \| ReactNode` The drawer body to use.
`cancel`	-	`ButtonProps \| ReactNode` The drawer cancel button to use.
`closeOnDrag`	`false`	`boolean` If `true`, then the drawer will close on drag.
`closeOnEsc`	`true`	`boolean` If `true`, the modal will close when the `Esc` key is pressed.
`closeOnOverlay`	`true`	`boolean` If `true`, the modal will close when the overlay is clicked.
`defaultOpen`	-	`boolean` If `true`, the element will be initially opened.
`dragConstraints`	`0`	`number` Applies constraints on the permitted draggable area.
`dragElastic`	`0.1`	`number` The degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.
`dragOffset`	`80`	`number` Offset from being dragged to closing.
`dragVelocity`	`100`	`number` Velocity of the drag that triggers close.
`duration`	-	`MotionTransitionProps["duration"]` The animation duration.
`finalFocusRef`	-	`RefObject<HTMLElement \| null>` `ref` of the element to return focus to when `FocusLock` unmounts.
`footer`	-	`DrawerFooterProps \| ReactNode` The drawer footer to use.
`header`	-	`DrawerHeaderProps \| ReactNode` The drawer header to use.
`initialFocusRef`	-	`RefObject<HTMLElement \| null>` `ref` of the element to receive focus initially.
`lockFocusAcrossFrames`	`false`	`boolean` Enables aggressive focus capturing within iframes. - If `true`: keep focus in the lock, no matter where lock is active. - If `false`: allows focus to move outside of iframe.
`middle`	-	`ButtonProps \| ReactNode` The drawer middle button to use.
`onCancel`	-	`(onClose: () => void) => void` The callback invoked when cancel button clicked.
`onClose`	-	`() => void \| Promise<void>` Callback invoked to close the element.
`onCloseComplete`	-	`() => void` Callback function to run side effects after the drawer has closed.
`onEsc`	-	`() => void` Callback invoked when the escape key is pressed and focus is within modal.
`onMiddle`	-	`(onClose: () => void) => void` The callback invoked when middle button clicked.
`onOpen`	-	`() => void \| Promise<void>` Callback invoked to open the element.
`onSuccess`	-	`(onClose: () => void) => void` The callback invoked when success button clicked.
`open`	-	`boolean` If `true`, the element will be opened.
`portalProps`	-	`Omit<PortalProps, "children">` Props to be forwarded to the portal component.
`restoreFocus`	`false`	`boolean` If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts.
`success`	-	`ButtonProps \| ReactNode` The drawer success button to use.
`title`	-	`DrawerTitleProps \| ReactNode` The drawer title to use.
`trigger`	-	`ReactNode` The modal trigger to use.
`withCloseButton`	`true`	`boolean` If `true`, display the drawer close button.
`withDragBar`	`true`	`boolean` If `true`, display the drag bar when `closeOnDrag` is `true`.
`withOverlay`	`true`	`boolean` If `true`, display the drawer overlay.

Drawer.CloseButton

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"2xl" \| "2xs" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"ghost" \| "outline" \| "solid" \| "subtle" \| "surface" ...` The variant of the component.
`active`	`false`	`boolean` If `true`, the button is represented as active.
`disabled`	`false`	`boolean` If `true`, the button is disabled.
`disableRipple`	`false`	`boolean` If `true`, disable ripple effects when pressing a element.
`icon`	-	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` The icon to be used in the button.
`loading`	`false`	`boolean` If `true`, the loading state of the button is represented.
`type`	`"button"`	`"button" \| "reset" \| "submit"` The type of button. Accepts `button`, `reset`, or `submit`.

Drawer.CloseTrigger

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Drawer.Content

Prop	Default	Type / Description
`as`	-	`keyof IntrinsicElements` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Drawer.DragBar

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Drawer.Footer

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Drawer.Header

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Drawer.OpenTrigger

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Drawer.Overlay

Prop	Default	Type / Description
`as`	-	`DOMElement` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Drawer.Title

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Accessibility

The Drawer follows the WAI-ARIA - Dialog (Modal) Pattern for accessibility.

When the Drawer opens, focus is trapped within it. That is, you cannot focus on elements outside the modal unless the modal is closed.

Key	Description	State
`Tab`	Focuses the next element inside the modal that is not disabled. If it's the last element, focuses the first element that is not disabled.	`open={true}`
`Shift` + `Tab`	Focuses the previous element inside the modal that is not disabled. If it's the first element, focuses the last element that is not disabled.	`open={true}`
`Escape`	Closes the modal.	`open={true}` + `closeOnEsc={true}`

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`Drawer.Content`	`role="dialog"`	Indicates that it is a dialog.
	`aria-modal="true"`	Indicates that the displayed widget is modal.
	`aria-labelledby`	Sets the `id` of the associated `Drawer.Title`.
	`aria-describedby`	Sets the `id` of the associated `Drawer.Body`.
`Drawer.OpenTrigger`	`aria-expanded`	Sets to `"true"` when modal is opened, and `"false"` when it is closed.
	`aria-controls`	Sets the `id` of the `Drawer.Content` when open, and is not set when closed.
	`aria-haspopup="dialog"`	Indicates that a dialog exists.
	`aria-label`	Sets to `"Open modal"`.
`Drawer.CloseButton`	`aria-label`	Sets to `"Close modal"`.
`Drawer.CloseTrigger`	`aria-label`	Sets to `"Close modal"`.
`Drawer.Overlay`	`aria-hidden="true"`	Excludes the element from the accessibility tree.