---
title: "MazDrawer"
description: "MazDrawer is a panel that slides in from the top, the bottom, the left or the right side of the screen over a backdrop, for side menus, filters or details"
package: "maz-ui"
url: "https://maz-ui.com/components/maz-drawer"
---

# MazDrawer

> MazDrawer is a panel that slides in from the top, the bottom, the left or the right side of the screen over a backdrop, for side menus, filters or details

- Package: `maz-ui`
- Import: `import MazDrawer from 'maz-ui/components/MazDrawer'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-drawer

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

**Tip:**

This component uses `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md), so you can implement this component anywhere and it inherits all its props

## Basic usage

```html
<MazBtn @click="isOpenedTop = !isOpenedTop"> Open top drawer </MazBtn>
<MazBtn @click="isOpenedLeft = !isOpenedLeft"> Open left drawer </MazBtn>
<MazBtn @click="isOpenedRight = !isOpenedRight"> Open right drawer </MazBtn>
<MazBtn @click="isOpenedBottom = !isOpenedBottom"> Open bottom drawer </MazBtn>

<MazDrawer variant="top" v-model="isOpenedTop">
  <template #title> Drawer top </template>
  <template #default="{ close }">
    <div style="padding: 16px">
      <p>Content</p>
      <div class="flex flex-wrap gap-2 mt-4">
        <MazBtn color="destructive" @click="close"> Close </MazBtn>
      </div>
    </div>
  </template>
</MazDrawer>

<MazDrawer variant="bottom" v-model="isOpenedBottom">
  <template #title> Drawer bottom </template>
  <template #default="{ close }">
    <div style="padding: 16px">
      <p>Content</p>
      <div class="flex flex-wrap gap-2 mt-4">
        <MazBtn color="destructive" @click="close"> Close </MazBtn>
      </div>
    </div>
  </template>
</MazDrawer>

<MazDrawer variant="start" v-model="isOpenedLeft">
  <template #title> Drawer left </template>
  <template #default="{ close }">
    <div style="padding: 16px">
      <p>Content</p>
      <div class="flex flex-wrap gap-2 mt-4">
        <MazBtn color="destructive" @click="close"> Close </MazBtn>
      </div>
    </div>
  </template>
</MazDrawer>

<MazDrawer variant="end" v-model="isOpenedRight">
  <template #title> Drawer right </template>
  <template #default="{ close }">
    <div style="padding: 16px">
      <p>Content</p>
      <div class="flex flex-wrap gap-2 mt-4">
        <MazBtn color="destructive" @click="close"> Close </MazBtn>
      </div>
    </div>
  </template>
</MazDrawer>
```

## Accessibility

The drawer is a modal `dialog` labelled by its `title`. The focus is trapped inside while it is open, Esc closes it, and the rest of the page is `inert` (except the toasts and the live regions). The close button is labelled from `@maz-ui/translations` (`aria.close`).

## MazDrawer API

`import MazDrawer from 'maz-ui/components/MazDrawer'`

### Props

- `title` (`string`): The title of the drawer.
- `variant` (`"end" | "start" | "bottom" | "top"`, default: `"end"`): The edge from which the drawer slides in. `start` (= left in LTR, right in RTL) and `end` (= right in LTR, left in RTL) follow the document direction; `top` and `bottom` are physical.
- `size` (`` `${number}rem` | `${number}px` | `${number}em` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | `${number}%` | `${number}ch` | `${number}cm` | `${number}mm` | `${number}in` | `${number}ex` | `${number}pc` | `${number... ``, default: `"30rem"`): The size of the drawer.
- `backdrop-class` (`string`): The class of the backdrop.
- `hide-close-button` (`boolean`): Disable the close button.
- `model-value` (`boolean`, `v-model`): Value of `v-model`, forwarded to the inner component.

### Events

- `@update:model-value` (payload: `value: boolean`): emitted when drawer is open or close
- `@open`: emitted when drawer is open
- `@close`: emitted when drawer is close (after animation)
- `@before-close`: emitted before drawer is close

### Slots

- `#title` Bindings: `close: () => void`.
- `#default` Bindings: `close: () => void`.