title: "Drawer" slug: "/packages/drawer" category: "overlay" componentNames:

• "DrawerContainer"
• "Drawer"
• "DrawerToggle"

Drawer

The Drawer component is used to put navigation items, or settings in an offcanvas menu. It can be fixed to the window, or the parent component.

To see the Drawer component in action, check out the drawer pattern.

import { DrawerContainer, DrawerToggle, Drawer } from "@ds-kit/drawer"

Basic Example

Note that for the demos the drawer is confined to the parent element. You can also use a fixed positioned drawer. See the the drawer-pattern for reference.

<Div position="relative" py="5rem" overflow="hidden">
  <DrawerContainer name="DrawerContainer">
    <DrawerToggle>{"Toggle"}</DrawerToggle>
    <Drawer position="absolute" p="1.25rem">
      {"This is some drawer content"}
    </Drawer>
  </DrawerContainer>
</Div>