Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.

Demo

							
                                
<template>
    <BButton @click="toggleOffCanvas">Show OffCanvas</BButton>
    <BOffcanvas v-model="show" title="Offcanvas">
        <template>
        <div>
            Some text as placeholder. In real life, you can have the elements you have
            chosen. Like, text, images, lists, etc.
        </div>
        <BDropdown class="mt-3" text="Dropdown button" variant="secondary">
            <BDropdownItem ref="#">Action</BDropdownItem>
            <BDropdownItem href="#">Another action</BDropdownItem>
            <BDropdownItem href="#">Something else here</BDropdownItem>
        </BDropdown>
        </template>
    </BOffcanvas>
</template>

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

const show = ref(false)

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

Placement

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

							
                                
<template>
    <div>
        <BButton @click="openOffcanvas('start')" class="m-2">Show start</BButton>
        <BButton @click="openOffcanvas('end')" class="m-2">Show end</BButton>
        <BButton @click="openOffcanvas('bottom')" class="m-2">Show bottom</BButton>
        <BButton @click="openOffcanvas('top')" class="m-2">Show top</BButton>
        <!-- offcanvas -->
        <BOffcanvas
            v-model="show"
            :placement="placement"
            :title="'Offcanvas ' + placement"
        >
            <template>
            <div>...</div>
            </template>
        </BOffcanvas>
    </div>
</template>

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

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

Demo
Placement