Vue componentFree

Slide-over Panel

Vue 3 slide-over drawer that opens from the left or right, with v-model:open, focus trap, Escape close, header and footer slots. Tailwind CSS, dark mode.

by Vueplayv1.0.0Updated 3 hours ago

Install

Full screen ↗

About this component

A side drawer for details, filters and edit forms: it slides in over the page while the list underneath stays in view. Use it when a full modal would feel heavy, or when the content is tall and reads better as a column.

It behaves like a proper modal dialog. Focus moves to the first field (not the close button), Tab stays inside the panel, Escape and backdrop clicks close it, page scroll is locked, and focus returns to whatever opened it. The slide animation is skipped for people who prefer reduced motion.

Choose the edge with side and the width with size; on phones it fills the screen. The body scrolls on its own between a fixed header and a sticky footer, and both header and footer slots receive a close() helper.

Left or right edge, four widths
v-model:open with slide and fade transitions
Focus trap, Escape close and focus return
Scrolling body with fixed header and footer
Respects prefers-reduced-motion

Code

11 files in the repo

<script setup lang="ts">
import { nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'

export type SlideOverSize = 'sm' | 'md' | 'lg' | 'xl'

const props = withDefaults(defineProps<{
  /** Whether the panel is shown. Use with `v-model:open`. */
  open?: boolean
  /** Edge the panel slides in from. */
  side?: 'left' | 'right'
  title?: string
  description?: string
  size?: SlideOverSize
  closeOnBackdrop?: boolean
  closeOnEsc?: boolean
  showClose?: boolean
}>(), {
  open: false,
  side: 'right',
  title: '',
  description: '',
  size: 'md',
  closeOnBackdrop: true,
  closeOnEsc: true,
  showClose: true,
})

const emit = defineEmits<{
  'update:open': [open: boolean]
  close: []
}>()

defineSlots<{
  default?: () => unknown
  /** Replaces the title and description block. */
  header?: (props: { close: () => void }) => unknown
  footer?: (props: { close: () => void }) => unknown
}>()

const uid = useId()
const titleId = `${uid}-title`
const descriptionId = `${uid}-description`
const panel = ref<HTMLElement | null>(null)

const sizeClass: Record<SlideOverSize, string> = {
  sm: 'max-w-sm',
  md: 'max-w-md',
  lg: 'max-w-xl',
  xl: 'max-w-3xl',
}

const FOCUSABLE = [
  'a[href]', 'button:not([disabled])', 'input:not([disabled]):not([type="hidden"])', 'select:not([disabled])',
  'textarea:not([disabled])', '[contenteditable="true"]', '[tabindex]:not([tabindex="-1"])',
].join(',')

function focusables(): HTMLElement[] {
  if (!panel.value) return []
  return Array.from(panel.value.querySelectorAll<HTMLElement>(FOCUSABLE)).filter((el) => el.getClientRects().length > 0)
}

function close() {
  emit('update:open', false)
  emit('close')
}

function onKeydown(event: KeyboardEvent) {
  if (event.key === 'Escape' && props.closeOnEsc) {
    event.stopPropagation()
    close()
    return
  }
  if (event.key !== 'Tab') return
  const list = focusables()
  const first = list[0]
  const last = list[list.length - 1]
  if (!first || !last) {
    event.preventDefault()
    return
  }
  if (event.shiftKey && (document.activeElement === first || document.activeElement === panel.value)) {
    event.preventDefault()
    last.focus()
  } else if (!event.shiftKey && document.activeElement === last) {
    event.preventDefault()
    first.focus()
  }
}

function onFocusIn(event: FocusEvent) {
  const target = event.target as Node | null
  if (panel.value && target && !panel.value.contains(target)) (focusables()[0] ?? panel.value).focus({ preventScroll: true })
}

let returnFocusTo: HTMLElement | null = null
let previousOverflow = ''
let previousPaddingRight = ''
let active = false

async function activate() {
  if (active) return
  active = true
  returnFocusTo = document.activeElement instanceof HTMLElement ? document.activeElement : null
  const scrollbar = window.innerWidth - document.documentElement.clientWidth
  previousOverflow = document.body.style.overflow
  previousPaddingRight = document.body.style.paddingRight
  document.body.style.overflow = 'hidden'
  if (scrollbar > 0) document.body.style.paddingRight = `${scrollbar}px`
  document.addEventListener('focusin', onFocusIn)
  await nextTick()
  // Prefer the first field over the close button so forms are ready to type into.
  const target = focusables().find((el) => !el.hasAttribute('data-slide-over-close')) ?? focusables()[0] ?? panel.value
  target?.focus({ preventScroll: true })
}

function deactivate() {
  if (!active) return
  active = false
  document.removeEventListener('focusin', onFocusIn)
  document.body.style.overflow = previousOverflow
  document.body.style.paddingRight = previousPaddingRight
  returnFocusTo?.focus({ preventScroll: true })
  returnFocusTo = null
}

watch(() => props.open, (isOpen) => (isOpen ? activate() : deactivate()), { immediate: true })
onBeforeUnmount(deactivate)
</script>

<template>
  <Teleport to="body">
    <Transition
      enter-active-class="transition-opacity duration-300 ease-out"
      enter-from-class="opacity-0"
      leave-active-class="transition-opacity duration-200 ease-in"
      leave-to-class="opacity-0"
    >
      <div
        v-if="open"
        class="fixed inset-0 z-50 bg-gray-950/40 dark:bg-black/60"
        aria-hidden="true"
        @click="closeOnBackdrop && close()"
      />
    </Transition>

    <Transition
      enter-active-class="transform transition duration-300 ease-out motion-reduce:transition-none"
      :enter-from-class="side === 'right' ? 'translate-x-full' : '-translate-x-full'"
      leave-active-class="transform transition duration-200 ease-in motion-reduce:transition-none"
      :leave-to-class="side === 'right' ? 'translate-x-full' : '-translate-x-full'"
    >
      <div
        v-if="open"
        ref="panel"
        role="dialog"
        aria-modal="true"
        :aria-labelledby="title ? titleId : undefined"
        :aria-describedby="description ? descriptionId : undefined"
        tabindex="-1"
        class="fixed inset-y-0 z-50 flex w-full flex-col bg-white shadow-2xl outline-none dark:bg-gray-900 dark:ring-1 dark:ring-white/10"
        :class="[sizeClass[size], side === 'right' ? 'right-0' : 'left-0']"
        @keydown="onKeydown"
      >
        <header class="flex items-start gap-4 border-b border-gray-100 px-5 py-5 sm:px-6 dark:border-white/10">
          <div class="min-w-0 flex-1">
            <slot name="header" :close="close">
              <h2 v-if="title" :id="titleId" class="text-base font-semibold text-gray-900 dark:text-white">{{ title }}</h2>
              <p v-if="description" :id="descriptionId" class="mt-1 text-sm text-gray-600 dark:text-gray-400">{{ description }}</p>
            </slot>
          </div>
          <button
            v-if="showClose"
            type="button"
            data-slide-over-close
            class="-m-1.5 rounded-lg p-1.5 text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 focus-visible:outline-2 focus-visible:outline-teal-600 dark:hover:bg-white/10 dark:hover:text-gray-200 dark:focus-visible:outline-teal-400"
            aria-label="Close panel"
            @click="close"
          >
            <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-5">
              <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
            </svg>
          </button>
        </header>

        <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-6 sm:px-6">
          <slot />
        </div>

        <footer v-if="$slots.footer" class="flex justify-end gap-3 border-t border-gray-100 bg-gray-50 px-5 py-4 sm:px-6 dark:border-white/10 dark:bg-white/[0.03]">
          <slot name="footer" :close="close" />
        </footer>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import SlideOverPanel from './Component.vue'

interface Order {
  id: string
  customer: string
  initials: string
  total: number
  status: 'Paid' | 'Pending' | 'Refunded'
  placed: string
  items: { name: string; qty: number; price: number }[]
}

const orders: Order[] = [
  { id: '#3104', customer: 'Lena Brandt', initials: 'LB', total: 184, status: 'Paid', placed: 'Sep 28', items: [{ name: 'Linen apron, sand', qty: 2, price: 38 }, { name: 'Stoneware mug set', qty: 1, price: 64 }, { name: 'Oak serving board', qty: 1, price: 44 }] },
  { id: '#3103', customer: 'Kwame Asante', initials: 'KA', total: 62, status: 'Pending', placed: 'Sep 27', items: [{ name: 'Beeswax candle trio', qty: 1, price: 34 }, { name: 'Cotton tea towels', qty: 2, price: 14 }] },
  { id: '#3102', customer: 'Sofia Marchetti', initials: 'SM', total: 129, status: 'Paid', placed: 'Sep 27', items: [{ name: 'Cast iron skillet', qty: 1, price: 89 }, { name: 'Walnut spoon', qty: 2, price: 20 }] },
  { id: '#3101', customer: 'Owen Tran', initials: 'OT', total: 48, status: 'Refunded', placed: 'Sep 25', items: [{ name: 'Ceramic planter, moss', qty: 1, price: 48 }] },
]

const filtersOpen = ref(false)
const detailOpen = ref(false)
const selected = ref<Order>(orders[0]!)

const filters = reactive({ statuses: ['Paid', 'Pending', 'Refunded'] as Order['status'][], minTotal: 0 })
const draft = reactive({ statuses: [...filters.statuses], minTotal: filters.minTotal })

const visible = computed(() => orders.filter((o) => filters.statuses.includes(o.status) && o.total >= filters.minTotal))

function openFilters() {
  draft.statuses = [...filters.statuses]
  draft.minTotal = filters.minTotal
  filtersOpen.value = true
}
function applyFilters() {
  filters.statuses = [...draft.statuses]
  filters.minTotal = draft.minTotal
  filtersOpen.value = false
}
function openOrder(order: Order) {
  selected.value = order
  detailOpen.value = true
}

const statusClass: Record<Order['status'], string> = {
  Paid: 'bg-teal-50 text-teal-700 ring-teal-600/20 dark:bg-teal-500/10 dark:text-teal-300 dark:ring-teal-400/20',
  Pending: 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-500/10 dark:text-amber-300 dark:ring-amber-400/20',
  Refunded: 'bg-gray-100 text-gray-600 ring-gray-500/20 dark:bg-white/5 dark:text-gray-400 dark:ring-white/10',
}

const secondary = 'rounded-lg bg-white px-4 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-gray-300 transition hover:bg-gray-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/15'
const primary = 'rounded-lg bg-teal-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-teal-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 dark:bg-teal-500 dark:hover:bg-teal-400'
</script>

<template>
  <main class="min-h-screen bg-gray-50 px-4 py-10 sm:px-6 sm:py-16 dark:bg-gray-950">
    <div class="mx-auto max-w-3xl">
      <div class="flex flex-wrap items-end justify-between gap-4">
        <div>
          <p class="text-sm font-semibold text-teal-600 dark:text-teal-400">Harbor &amp; Hearth</p>
          <h1 class="mt-1 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Recent orders</h1>
          <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Select an order to see its details, or open the filters.</p>
        </div>
        <button type="button" :class="secondary" class="inline-flex items-center gap-2" @click="openFilters">
          <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4 text-gray-400">
            <path fill-rule="evenodd" d="M2.5 4.75A.75.75 0 0 1 3.25 4h13.5a.75.75 0 0 1 .55 1.26L12 11.03v4.22a.75.75 0 0 1-1.1.66l-2.5-1.32a.75.75 0 0 1-.4-.66v-2.9L2.7 5.26a.75.75 0 0 1-.2-.51Z" clip-rule="evenodd" />
          </svg>
          Filters
        </button>
      </div>

      <ul class="mt-6 divide-y divide-gray-100 overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-900/5 dark:divide-white/5 dark:bg-gray-900 dark:ring-white/10">
        <li v-for="order in visible" :key="order.id">
          <button type="button" class="flex w-full items-center gap-4 px-4 py-4 text-left transition hover:bg-gray-50 focus-visible:bg-gray-50 focus-visible:outline-none sm:px-5 dark:hover:bg-white/5 dark:focus-visible:bg-white/5" @click="openOrder(order)">
            <span class="flex size-10 shrink-0 items-center justify-center rounded-full bg-teal-100 text-sm font-semibold text-teal-800 dark:bg-teal-500/15 dark:text-teal-300" aria-hidden="true">{{ order.initials }}</span>
            <span class="min-w-0 flex-1">
              <span class="block truncate text-sm font-medium text-gray-900 dark:text-white">{{ order.customer }}</span>
              <span class="block text-xs text-gray-500 dark:text-gray-400">{{ order.id }} · {{ order.placed }}</span>
            </span>
            <span class="hidden rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset sm:inline" :class="statusClass[order.status]">{{ order.status }}</span>
            <span class="w-14 text-right text-sm font-semibold text-gray-900 tabular-nums dark:text-white">${{ order.total }}</span>
          </button>
        </li>
        <li v-if="!visible.length" class="px-5 py-10 text-center text-sm text-gray-500 dark:text-gray-400">No orders match these filters.</li>
      </ul>
    </div>

    <!-- Left: filters -->
    <SlideOverPanel v-model:open="filtersOpen" side="left" size="sm" title="Filter orders" description="Narrow the list by status and order value.">
      <fieldset>
        <legend class="text-sm font-medium text-gray-900 dark:text-white">Status</legend>
        <div class="mt-3 space-y-3">
          <label v-for="s in (['Paid', 'Pending', 'Refunded'] as const)" :key="s" class="flex items-center gap-3 text-sm text-gray-700 dark:text-gray-300">
            <input v-model="draft.statuses" type="checkbox" :value="s" class="size-4 rounded accent-teal-600">
            {{ s }}
          </label>
        </div>
      </fieldset>
      <div class="mt-8">
        <label for="min-total" class="flex justify-between text-sm font-medium text-gray-900 dark:text-white">
          Minimum total <span class="text-gray-500 tabular-nums dark:text-gray-400">${{ draft.minTotal }}</span>
        </label>
        <input id="min-total" v-model.number="draft.minTotal" type="range" min="0" max="200" step="10" class="mt-3 w-full accent-teal-600">
      </div>
      <template #footer="{ close }">
        <button type="button" :class="secondary" @click="close">Cancel</button>
        <button type="button" :class="primary" @click="applyFilters">Apply filters</button>
      </template>
    </SlideOverPanel>

    <!-- Right: order details -->
    <SlideOverPanel v-model:open="detailOpen" :title="`Order ${selected.id}`" :description="`Placed ${selected.placed} by ${selected.customer}`">
      <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset" :class="statusClass[selected.status]">{{ selected.status }}</span>

      <h3 class="mt-6 text-sm font-medium text-gray-900 dark:text-white">Items</h3>
      <ul class="mt-3 divide-y divide-gray-100 dark:divide-white/5">
        <li v-for="item in selected.items" :key="item.name" class="flex items-center gap-3 py-3 text-sm">
          <span class="size-10 shrink-0 rounded-lg bg-gradient-to-br from-teal-100 to-emerald-200 dark:from-teal-500/20 dark:to-emerald-500/10" aria-hidden="true" />
          <span class="min-w-0 flex-1">
            <span class="block truncate font-medium text-gray-900 dark:text-white">{{ item.name }}</span>
            <span class="block text-xs text-gray-500 dark:text-gray-400">Qty {{ item.qty }} × ${{ item.price }}</span>
          </span>
          <span class="font-medium text-gray-900 tabular-nums dark:text-white">${{ item.qty * item.price }}</span>
        </li>
      </ul>
      <dl class="mt-4 space-y-2 border-t border-gray-100 pt-4 text-sm dark:border-white/10">
        <div class="flex justify-between text-gray-600 dark:text-gray-400"><dt>Shipping</dt><dd>Free</dd></div>
        <div class="flex justify-between font-semibold text-gray-900 dark:text-white"><dt>Total</dt><dd class="tabular-nums">${{ selected.total }}</dd></div>
      </dl>

      <h3 class="mt-8 text-sm font-medium text-gray-900 dark:text-white">Shipping to</h3>
      <p class="mt-2 text-sm/6 text-gray-600 dark:text-gray-400">{{ selected.customer }}<br>14 Quayside Lane<br>Port Alder, 40211</p>

      <template #footer="{ close }">
        <button type="button" :class="secondary" @click="close">Close</button>
        <button type="button" :class="primary" @click="close">Print packing slip</button>
      </template>
    </SlideOverPanel>
  </main>
</template>

Props

Prop	Type	Default	Description
open	`boolean`	`false`	Whether the panel is visible. Bind with v-model:open.
side	`'left' \| 'right'`	`'right'`	Edge of the screen the panel slides in from.
title	`string`	`''`	Panel heading, also used as the dialog's accessible name.
description	`string`	`''`	Supporting text under the title, linked with aria-describedby.
size	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Maximum panel width. On small screens the panel is full width.
closeOnBackdrop	`boolean`	`true`	Close when the dimmed backdrop is clicked.
closeOnEsc	`boolean`	`true`	Close when Escape is pressed.
showClose	`boolean`	`true`	Show the close (×) button in the header.

Events

Event	Payload	Description
update:open	`(open: boolean)`	Emitted with false when the panel asks to close.
close	`()`	Emitted whenever the panel closes itself.

Slots

Slot	Description
default	Panel body. Scrolls independently of the header and footer.
header	Replaces the title and description block. Receives { close }.
footer	Action bar pinned to the bottom. Receives { close }.

All modals & overlays →

Free

Component · Modals & overlays

Modal Dialog

Accessible Vue 3 modal dialog with v-model:open, focus trap, Escape and backdrop close, scroll lock and footer slot. Tailwind CSS, dark mode.

by Vueplay

Free

Component · Modals & overlays

Tool

A lightweight and customizable tooltip component with dynamic dark/light themes, responsive positioning (top, bottom, left, right), and smooth hover effects with adaptive colors.

Free

Component · Hero sections

Hero Split

Split Vue 3 hero section with copy and two CTAs on the left and a Tailwind-drawn app window mockup on the right. Dark mode, typed props, no images.

by Vueplay1 installs

Free

Component · Feature sections

Bento Grid

Bento-style Vue 3 feature grid with wide and tall tiles and small CSS-drawn visuals like maps, timelines and code. Tailwind CSS, dark mode, typed tiles.

by Vueplay

About this component

Code

Props

Events

Slots

Related components

Modal Dialog

Tool

Hero Split

Bento Grid