Offcanvas

Build hidden sidebars into your project. Sidebars can aid in enhancing user interaction or preventing further interaction.

HTML

vue

<template>
  <BButton @click="click">Show OffCanvas</BButton>
  <BOffcanvas v-model="show" />
</template>

<script setup lang="ts">
import {ref} from 'vue'

const show = ref(false)

const click = () => {
  show.value = !show.value
}
</script>

Customizing Location

Customize location with four standard options top, bottom, start, end.

HTML

vue

<template>
  <BButton @click="click('start')" class="m-2">Show start</BButton>
  <BButton @click="click('end')" class="m-2">Show end</BButton>
  <BButton @click="click('bottom')" class="m-2">Show bottom</BButton>
  <BButton @click="click('top')" class="m-2">Show top</BButton>

  <BOffcanvas v-model="show" :placement="placement" />
</template>

<script setup lang="ts">
const show = ref(false)
const placement = ref('start')

const click = (place = 'start') => {
  placement.value = place
  show.value = !show.value
}
</script>

Responsive

The responsive prop in the BOffcanvas component enables adaptive display behavior based on the viewport size. When set, the offcanvas content displays inline for viewports wider than the specified breakpoint, and as a traditional offcanvas for narrower viewports

Note: In SSR environments, the BOffcanvas component must be rendered client-side due to its dependency on browser context for responsive behavior. Use client-only directives or components to ensure proper functionality

template

<BOffcanvas responsive="md" />

Component Reference

<BOffcanvas>

View Source

<BOffcanvas> Properties
<BOffcanvas> Events
<BOffcanvas> Slots

Adding styles: .offcanvas[‑*]

Properties

Prop	Type	Default	Description
backdrop-first	`boolean`	`false`	Animate the backdrop before the offcanvas, and on leave animate the offcanvas before the backdrop
body-attrs	`Readonly<AttrsValue>`	`undefined`
body-class	`ClassValue`	`undefined`
body-scrolling	`boolean`	`false`
footer-class	`string`	`undefined`
header-class	`string`	`undefined`
header-close-class	`ClassValue`	`undefined`
header-close-label	`string`	`'Close'`
header-close-variant	`ButtonVariant \| null`	`'secondary'`
id	`string`	`undefined`
initial-animation	`boolean`	`false`	When set, enables the initial animation on mount
lazy	`boolean`	`false`	When set, the content will not be mounted until opened
model-value	`boolean`	`false`	Controls the visibility of the component
no-animation	`boolean`	`false`	When set, disables the animation
no-backdrop	`boolean`	`false`
no-close-on-backdrop	`boolean`	`false`
no-close-on-esc	`boolean`	`false`
no-fade	`boolean`	`false`	Alias for `noAnimation`
no-focus	`boolean`	`false`
no-header	`boolean`	`false`
no-header-close	`boolean`	`false`
no-trap	`boolean`	`false`	Disables the focus trap feature
placement	`Placement`	`'start'`
responsive	`Breakpoint`	`undefined`
shadow	`Size \| boolean`	`false`
show	`boolean`	`false`	When set, and prop 'visible' is false on mount, will animate from closed to open on initial mount. Mainly to help with template show. Use model-value for reactive show/hide
teleport-disabled	`boolean`	`false`
teleport-to	`string \| RendererElement \| null \| undefined`	`'body'`
title	`string`	`undefined`
trans-props	`TransitionProps`	`undefined`	Transition properties
unmount-lazy	`boolean`	`false`	When set and `lazy` is true, the content will be unmounted when closed
visible	`boolean`	`false`	When 'true', open without animation
width	`string`	`undefined`

Events

Event	Args	Description
breakpoint	`value: BvTriggerableEvent` - The event `opened: boolean` - Whether or not the offcanvas is above the breakpoint and is open by it	Emitted when the offcanvas' breakpoint state changes
close	`value: BvTriggerableEvent`
esc	`value: BvTriggerableEvent`
hidden	`value: BvTriggerableEvent`
hide	`value: BvTriggerableEvent`
hide-prevented
show	`value: BvTriggerableEvent`
show-prevented
shown	`value: BvTriggerableEvent`
update:model-value	`update:model-value: boolean`

Slots

Name	Scope	Description
backdrop
default	`visible: boolean` `placement: 'top' \| 'bottom' \| 'start' \| 'end'` `hide: (trigger?: string) => void`
footer	`visible: boolean` `placement: 'top' \| 'bottom' \| 'start' \| 'end'` `hide: (trigger?: string) => void`
header	`visible: boolean` `placement: 'top' \| 'bottom' \| 'start' \| 'end'` `hide: (trigger?: string) => void`
header-close
title	`visible: boolean` `placement: 'top' \| 'bottom' \| 'start' \| 'end'` `hide: (trigger?: string) => void`

Offcanvas ​

Customizing Location ​