ui/docs/content/3.components/drawer.md

description, links

description	links
A drawer that slides in from the bottom of the screen.	label icon to Drawer i-custom-radix-vue https://github.com/radix-vue/vaul-vue label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/tree/v3/src/runtime/components/Drawer.vue

Usage

Use a Button or any other component in the default slot of the Drawer.

Then, use the #content slot to add the content displayed when the Drawer is open.

::component-code

prettier: true class: 'justify-center' slots: default: |

<UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />

content: |

<Placeholder class="h-48 m-4" />

---

:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}

#content :placeholder{class="h-48 m-4"} ::

You can also use the #header{lang="ts-type"}, #body{lang="ts-type"} and #footer{lang="ts-type"} slots to customize the Drawer's content.

Title

Use the title prop to set the title of the Drawer's header.

::component-code

prettier: true class: 'justify-center' props: title: 'Drawer with title' slots: default: |

<UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />

body: |

<Placeholder class="h-48" />

---

:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}

#body :placeholder{class="h-48"} ::

Description

Use the description prop to set the description of the Drawer's header.

::component-code

prettier: true class: 'justify-center' ignore:

• title props: title: 'Drawer with description' description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' slots: default: |

body: |

<Placeholder class="h-48" />

---

:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}

#body :placeholder{class="h-48"} ::

Overlay

Use the overlay prop to control whether the Drawer has an overlay or not. Defaults to true.

::component-code

prettier: true class: 'justify-center' props: overlay: false slots: default: |

<UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />

content: |

<Placeholder class="h-48 m-4" />

---

:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}

#content :placeholder{class="h-48 m-4"} ::

Scale background

Use the should-scale-background prop to scale the background when the Drawer is open, creating a visual depth effect.

::component-code

prettier: true class: 'justify-center' props: shouldScaleBackground: true slots: default: |

<UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />

content: |

<Placeholder class="h-48 m-4" />

---

:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}

#content :placeholder{class="h-screen m-4"} ::

::important Make sure to add the vaul-drawer-wrapper directive to a parent element of your app to make this work.

<template>
  <UApp>
    <div class="bg-white dark:bg-gray-900" vaul-drawer-wrapper>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </div>
  </UApp>
</template>

export default defineNuxtConfig({
  app: {
    rootAttrs: {
      'vaul-drawer-wrapper': '',
      'class': 'bg-white dark:bg-gray-900'
    }
  }
})

::

Examples

Control open state

You can control the open state by using the default-open prop or the v-model:open directive.

::component-example

name: 'drawer-open-example' class: 'justify-center'

::

::note In this example, press :kbd{value="O"} to toggle the Drawer. ::

::tip This allows you to move the trigger outside of the Drawer or remove it entirely. ::

With footer slot

Use the #footer slot to add content after the Drawer's body.

::component-example

name: 'drawer-footer-slot-example' class: 'justify-center'

::

With command palette

You can use the CommandPalette component inside the Drawer's content.

::component-example

collapse: true name: 'drawer-command-palette-example' class: 'justify-center'

::

API

Props

:component-props

Slots

:component-slots

Emits

:component-emits

Theme

:component-theme