</script>

<template>

<UDrawer v-model:open="open" :dismissible="false" :handle="false" :ui="{ header: 'flex items-center justify-between' }">

<UDrawer v-model:open="open" :dismissible="false" :modal="false" :handle="false">

<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />

<template #header>

<h2 class="text-highlighted font-semibold">

Drawer non-dismissible

</h2>

<template #body>

<div class="flex items-center justify-between gap-4 mb-4">

<h2 class="text-highlighted font-semibold">

Drawer non-dismissible

</h2>

<UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="open = false" />

</template>

<UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="open = false" />

</div>

<template #body>

<Placeholder class="h-48" />

<Placeholder class="size-full min-h-48" />

</template>

</UDrawer>

</template>

<script setup lang="ts">

const open = ref(false)

</script>

<template>

<UPopover v-model:open="open" :dismissible="false" :ui="{ content: 'p-4' }">

<UPopover :dismissible="false" :ui="{ content: 'p-4' }">

<UButton label="Open" color="neutral" variant="subtle" />

<template #content>

<template #content="{ close }">

<div class="flex items-center gap-4 mb-4">

<h2 class="text-highlighted font-semibold">

Popover non-dismissible

</h2>

<UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="open = false" />

<UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="close" />

</div>

<Placeholder class="size-full min-h-48" />

:div{class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"}[Right click here]

::

### Modal

Use the `modal` prop to control whether the ContextMenu blocks interaction with outside content. Defaults to `true`.

::component-code

---

prettier: true

ignore:

- items

- ui.content

external:

- items

externalTypes:

- ContextMenuItem[]

props:

modal: false

items:

- label: System

icon: i-lucide-monitor

- label: Light

icon: i-lucide-sun

- label: Dark

icon: i-lucide-moon

ui:

content: 'w-48'

slots:

default: |

<div class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72">

Right click here

</div>

---

:div{class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"}[Right click here]

::

### Disabled

Use the `disabled` prop to disable the ContextMenu.

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

::

### Modal

Use the `modal` prop to control whether the Drawer blocks interaction with outside content. Defaults to `true`.

::note

When `modal` is set to `false`, the overlay is automatically disabled and outside content becomes interactive.

::

::component-code

---

prettier: true

props:

modal: false

slots:

default: |

<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />

content: |

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

---

:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}

#content

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

::

### Dismissible

Use the `dismissible` prop to control whether the Drawer is dismissible when clicking outside of it or pressing escape. Defaults to `true`.

::note

A `close:prevent` event will be emitted when the user tries to close it.

::

::tip

You can combine `modal: false` with `dismissible: false` to make the Drawer's background interactive without closing it.

::

::component-example

---

prettier: true

name: 'drawer-dismissible-example'

---

::

### Scale Background

Use the `should-scale-background` prop to scale the background when the Drawer is open, creating a visual depth effect. You can set the `set-background-color-on-scale` prop to `false` to prevent changing the background color.

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

::

### Disable dismissal

Set the `dismissible` prop to `false` to prevent the Drawer from being closed when clicking outside of it or pressing escape. A `close:prevent` event will be emitted when the user tries to close it.

::component-example

---

prettier: true

name: 'drawer-dismissible-example'

---

::

::note

In this example, the `header` slot is used to add a close button which is not done by default.

::

### With interactive background

Set the `overlay` and `modal` props to `false` alongside the `dismissible` prop to make the Drawer's background interactive without closing the Drawer.

::component-example

---

prettier: true

name: 'drawer-modal-example'

---

::

### Responsive drawer

You can render a [Modal](/docs/components/modal) component on desktop and a Drawer on mobile for example.

When using the same size, the DropdownMenu items will be perfectly aligned with the Button.

::

### Modal

Use the `modal` prop to control whether the DropdownMenu blocks interaction with outside content. Defaults to `true`.

::component-code

---

prettier: true

ignore:

- items

- ui.content

external:

- items

externalTypes:

- DropdownMenuItem[]

props:

modal: false

items:

- label: Profile

icon: i-lucide-user

- label: Billing

icon: i-lucide-credit-card

- label: Settings

icon: i-lucide-cog

ui:

content: 'w-48'

slots:

default: |

<UButton label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />

---

:u-button{label="Open" icon="i-lucide-menu" color="neutral" variant="outline"}

::

### Disabled

Use the `disabled` prop to disable the DropdownMenu.