Offcanvas

A panel that slides in from a viewport edge (position), rendered at the end of <body>. With backdrop (the default) it is modal and traps focus. Escape, the backdrop and the header's close button close it; so does any element inside with data-bs-dismiss="offcanvas".

Basic usage

Source

<button type="button" class="btn btn-primary" @click="open = true">Open</button><BsOffcanvas v-model:open="open" position="end">  <template #header>Offcanvas title</template>  Place any content here — forms, lists, navigation.</BsOffcanvas>