---
title: Drawer
category: General
summary: Use to add collapsible navigation items or content anchored to the right side of the screen.
---

```jsx live
render(() => {
  const [open, setOpen] = React.useState(false)
  const [saving, setSaving] = React.useState(false)
  React.useEffect(() => {
    if (saving) {
      setTimeout(() => setSaving(false), 1000)
    }
  }, [saving])
  return (
    <StackView height={32}>
      <Button title="Open Drawer" onClick={() => setOpen(true)} />
      <Drawer open={open} width={32}>
        <GridView
          columns="auto 1fr auto"
          alignment="center"
          padding={1}
          spacing={1}
          backgroundColor="white"
        >
          <Button
            title="close drawer"
            icon={{ name: 'close', color: 'primary' }}
            variant="naked"
            onClick={() => setOpen(false)}
          />
          <Heading level={3} weight={700}>
            Item Details
          </Heading>
          <Button
            title="Save"
            theme="primary"
            spinner={saving}
            onClick={() => setSaving(true)}
          />
        </GridView>
        <Divider />
        <StackView padding={2}>Drawer Content</StackView>
      </Drawer>
    </StackView>
  )
})
```