Offcanvas

The Offcanvas component provides a sidebar panel that slides in from the edge of the viewport. It supports left/right/top/bottom placement, <Teleport>, ESC dismiss, and backdrop interactions.

Basic Usage

Control the offcanvas visibility via v-model. By default, it slides in from the right (end).

<script setup lang="ts">
import { ref } from 'vue'
const visible = ref(false)
</script>

<template>
  <button class="btn btn-primary" @click="visible = true">Open Offcanvas</button>
  <TOffcanvas v-model="visible" title="Basic Offcanvas">
    <p>Offcanvas content</p>
  </TOffcanvas>
</template>

Four Placements

Use the placement prop to control from which edge the offcanvas slides in: start (left), end (right, default), top, or bottom.

<template>
  <TOffcanvas v-model="visible" title="Left" placement="start" />
  <TOffcanvas v-model="visible" title="Right" placement="end" />
  <TOffcanvas v-model="visible" title="Top" placement="top" />
  <TOffcanvas v-model="visible" title="Bottom" placement="bottom" />
</template>

Without Backdrop

Set :backdrop="false" to remove the backdrop overlay. The background content remains interactive.

<TOffcanvas v-model="visible" title="No Backdrop" :backdrop="false">
  <template #footer>
    <button class="btn btn-primary" @click="visible = false">Close</button>
  </template>
</TOffcanvas>

Form Content

Place form elements inside the offcanvas body and use the #footer slot for action buttons.

Show Code

<TOffcanvas v-model="visible" title="Login">
  <div class="mb-3">
    <label class="form-label">Username</label>
    <input v-model="username" type="text" class="form-control">
  </div>
  <template #footer>
    <button class="btn btn-primary ms-auto" @click="visible = false">Submit</button>
  </template>
</TOffcanvas>

API

Props

Prop	Type	Default	Description
modelValue	boolean	false	v-model binding, controls visibility
placement	'start' | 'end' | 'top' | 'bottom'	'end'	Slide-in direction
title	string	—	Offcanvas title
closable	boolean	true	Show close button
closeOnBackdrop	boolean | 'static'	true	Close on backdrop click; 'static' prevents closing
closeOnEsc	boolean	true	Close on ESC key press
backdrop	boolean	true	Show backdrop overlay
scroll	boolean	false	Allow body scrolling when open
teleportTo	string	'body'	Teleport target selector

Slots

Name	Description
default	Offcanvas body content
title	Custom title area
header	Custom entire header (replaces default title + close button)
footer	Footer action bar (with border-top)

Emits

Event	Payload	Description
update:modelValue	(value: boolean)	v-model update
open	—	Fires when offcanvas starts opening
opened	—	Fires after open transition completes
close	—	Fires when offcanvas starts closing
closed	—	Fires after close transition completes