Offcanvas

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

View the official docs here

Examples

Basic

Link with href
Offcanvas title
Woo-hoo, you're reading this text in an offcanvas!
Astro file 
---
import { Offcanvas } from 'astro-bootstrap';
const id = 'offcanvasExample';
---

<!-- launch with button examples -->
<a
  class="btn btn-primary"
  data-bs-toggle="offcanvas"
  href={`#${id}`}
  role="button"
  aria-controls={id}
>
  Link with href
</a>
<button
  class="btn btn-primary"
  type="button"
  data-bs-toggle="offcanvas"
  data-bs-target={`#${id}`}
  aria-controls={id}
>
  Button with data-bs-target
</button>

<!-- Offcanvas -->
<Offcanvas {id}>
  <Offcanvas.Header parent={id}>Offcanvas title</Offcanvas.Header>
  <Offcanvas.Body>
    Woo-hoo, you're reading this text in an offcanvas!
  </Offcanvas.Body>
</Offcanvas>

API

Offcanvas

Offcanvas.Header

Offcanvas.Body

Offcanvas.Footer