N Drawer

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

DrawerContent Props

Drawer Slots

DrawerContent Slots

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