n-drawer

name	n-drawer
description	Drawer component for slide-out panels and side navigation. Invoke when user needs to create slide-out panels, sidebars, or multi-level navigation drawers in Naive UI.
metadata	{"author":"jiaiyan","version":"1.0.0"}

Naive UI Drawer Component

Drawer component for slide-out panels, sidebars, and navigation from screen edges.

When to Use

Use this component when:

• Side navigation: Display navigation menus or filters
• Detail panels: Show detailed information without leaving the page
• Forms: Collect user input in a slide-out panel
• Multi-level content: Nested drawer interactions

When to Invoke

Invoke this skill when:

• User needs to create slide-out panels from any screen edge
• User wants to implement multi-level drawers
• User needs resizable drawer functionality
• User wants to customize drawer placement and size
• User asks about drawer content scrolling

Features

• Multiple Placements: top, right, bottom, left
• Resizable: Drag to resize drawer width/height
• Multiple Drawers: Support for nested drawers
• Customizable Size: Control width and height
• Scroll Support: Native or custom scrollbar
• Custom Display Area: Render in specific container
• Header and Footer: Built-in header/footer slots

API Reference

Drawer Props

Name	Type	Default	Description
auto-focus	boolean	true	Whether to focus the first focusable element inside drawer.
block-scroll	boolean	true	Whether to disabled body scrolling when it's active.
close-on-esc	boolean	true	Whether to close drawer on Esc is pressed.
content-class	string	undefined	Class of drawer's scrollable content node.
content-style	string | Object	undefined	Style of drawer's scrollable content node.
default-width	number | string	251	Default width of the drawer, works when placement is left and right.
default-height	number | string	251	Default height of the drawer, works when placement is top and bottom.
display-directive	'if' | 'show'	'if'	The display directive to use.
height	number | string	undefined	Works when placement is top and bottom.
native-scrollbar	boolean	true	Whether to use native scrollbar on drawer.
mask-closable	boolean	true	Whether to emit hide event when click mask.
max-width	number	undefined	Max width of resizable drawer.
max-height

DrawerContent Props

Name	Type	Default	Description
body-class	string	undefined	Drawer content's body class.
body-style	string | Object	undefined	Drawer content's body style.
closable	boolean	false	Whether the drawer content is closable.
footer-class	string	undefined	Drawer content's footer class.
footer-style	string | Object	undefined	Drawer content's footer style.
header-class	string	undefined	Drawer content's header class.
header-style	string | Object	undefined	Drawer content's header style.
native-scrollbar	boolean	true	Whether to use native scrollbar on body part.
title	string	undefined	Drawer content title.
scrollbar-props	ScrollbarProps	undefined	Scrollbar props.

Drawer Slots

Name	Parameters	Description
default	()	The content of the drawer.

DrawerContent Slots

Name	Parameters	Description
default	()	The content of the drawer content.
footer	()	The footer of the drawer content.
header	()	The header of the drawer content.

Basic Usage

Basic Drawer

<template>
  <n-button-group>
    <n-button @click="activate('top')">Top</n-button>
    <n-button @click="activate('right')">Right</n-button>
    <n-button @click="activate('bottom')">Bottom</n-button>
    <n-button @click="activate('left')">Left</n-button>
  </n-button-group>
  <n-drawer v-model:show="active" :width="502" :placement="placement">
    <n-drawer-content title="Drawer Title">
      Drawer content goes here
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import { ref } from 'vue'

const active = ref(false)
const placement = ref('right')

const activate = (place) => {
  placement.value = place
  active.value = true
}
</script>

Multiple Drawers

<template>
  <n-button @click="showOuter = true">Open Outer Drawer</n-button>
  <n-drawer v-model:show="showOuter" :width="502">
    <n-drawer-content title="Outer Drawer">
      <p>Outer drawer content</p>
      <template #footer>
        <n-button @click="showInner = true">Open Inner Drawer</n-button>
      </template>
    </n-drawer-content>
  </n-drawer>
  <n-drawer v-model:show="showInner" :width="300">
    <n-drawer-content title="Inner Drawer">
      <p>Inner drawer content</p>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import { ref } from 'vue'

const showOuter = ref(false)
const showInner = ref(false)
</script>

Closable Drawer

<template>
  <n-button @click="show = true">Open</n-button>
  <n-drawer v-model:show="show" :width="502">
    <n-drawer-content title="Closable Drawer" closable>
      This drawer has a close button in the header
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
</script>

Custom Header and Footer

<template>
  <n-button @click="show = true">Open</n-button>
  <n-drawer v-model:show="show" :width="502">
    <n-drawer-content>
      <template #header>
        <n-space align="center">
          <n-icon><SettingsIcon /></n-icon>
          <span>Custom Header</span>
        </n-space>
      </template>
      Drawer content
      <template #footer>
        <n-space justify="end">
          <n-button @click="show = false">Cancel</n-button>
          <n-button type="primary" @click="handleSave">Save</n-button>
        </n-space>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)

const handleSave = () => {
  console.log('Saved')
  show.value = false
}
</script>

Resizable Drawer

<template>
  <n-button @click="show = true">Open Resizable</n-button>
  <n-drawer
    v-model:show="show"
    :default-width="502"
    placement="right"
    resizable
    :min-width="200"
    :max-width="800"
  >
    <n-drawer-content title="Resizable Drawer">
      Drag the edge to resize this drawer
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
</script>

Custom Display Area

<template>
  <n-button @click="show = true">Open in Target</n-button>
  <div
    id="drawer-target"
    style="position: relative; width: 100%; height: 300px; border: 1px solid #ccc;"
  >
    Target Area
  </div>
  <n-drawer
    v-model:show="show"
    :width="200"
    placement="right"
    :trap-focus="false"
    :block-scroll="false"
    to="#drawer-target"
  >
    <n-drawer-content title="Local Drawer">
      Drawer inside target area
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
</script>

Scrollable Content

<template>
  <n-button @click="show = true">Open Scrollable</n-button>
  <n-drawer v-model:show="show" :width="480">
    <n-drawer-content title="Scrollable Content" :native-scrollbar="false">
      <p v-for="i in 50" :key="i">
        Paragraph {{ i }}: Lorem ipsum dolor sit amet...
      </p>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
</script>

Common Patterns

Navigation Drawer

<template>
  <n-button @click="show = true">
    <template #icon>
      <n-icon><MenuIcon /></n-icon>
    </template>
    Menu
  </n-button>
  <n-drawer v-model:show="show" :width="240" placement="left">
    <n-drawer-content title="Navigation">
      <n-menu :options="menuOptions" @update:value="handleMenuSelect" />
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import { ref, h } from 'vue'
import { NIcon } from 'naive-ui'

const show = ref(false)

const menuOptions = [
  { label: 'Home', key: 'home' },
  { label: 'About', key: 'about' },
  { label: 'Settings', key: 'settings' }
]

const handleMenuSelect = (key) => {
  console.log('Selected:', key)
  show.value = false
}
</script>

Form in Drawer

<template>
  <n-button @click="show = true">Edit Profile</n-button>
  <n-drawer v-model:show="show" :width="400">
    <n-drawer-content title="Edit Profile">
      <n-form :model="form">
        <n-form-item label="Name">
          <n-input v-model:value="form.name" />
        </n-form-item>
        <n-form-item label="Email">
          <n-input v-model:value="form.email" />
        </n-form-item>
      </n-form>
      <template #footer>
        <n-space justify="end">
          <n-button @click="show = false">Cancel</n-button>
          <n-button type="primary" @click="handleSave">Save</n-button>
        </n-space>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import { ref, reactive } from 'vue'

const show = ref(false)
const form = reactive({
  name: '',
  email: ''
})

const handleSave = () => {
  console.log('Saved:', form)
  show.value = false
}
</script>

Best Practices

1. Use appropriate width/height: Set reasonable sizes for different placements

   <n-drawer :width="400" placement="right">
   

2. Use default-width with resizable: Provide initial size for resizable drawers

   <n-drawer :default-width="502" resizable>
   

3. Handle nested drawers: Multiple drawers can stack naturally

4. Use native-scrollbar with n-drawer-content: Keep native-scrollbar true when using n-drawer-content

   <n-drawer :native-scrollbar="true">
     <n-drawer-content>...</n-drawer-content>
   </n-drawer>
   

5. Trap focus appropriately: Disable trap-focus when drawer is in a custom container

   <n-drawer to="#target" :trap-focus="false">
   

6. Provide close options: Either use closable prop or add close button in footer