Props

Prop	Type	Default	Values	Description
placement	string	'start'	start|end|top|bottom	Set offcanvas placement.
bp	string		sm|md|lg|xl|xxl	Hide content outside the viewport from a specified breakpoint and down.
backdrop	string|boolean	true	true|false|'static'	Show or hide backdrop. When `static` the offcanvas will not close when clicking outside of it.
scroll	boolean	false	true|false	Use this prop to enable `body` scrolling.
dark	boolean	false	true|false	Set dark offcanvas.

---

# Default

<x-button toggle="offcanvas" target="#myOffcanvas">Launch default offcanvas</x-button>

<x-offcanvas id="myOffcanvas">
  <x-offcanvas.header>
    <h5 class="offcanvas-title" id="myOffcanvasLabel">Offcanvas title</h5>
  </x-offcanvas.header>

  <x-offcanvas.body>
    Offcanvas content...
  </x-offcanvas.body>
</x-offcanvas>

---

# Prop placement

Set offcanvas placement using prop placement . Default is start .

<x-offcanvas id="myOffcanvas" placement="start">
  ...
</x-offcanvas>

<x-offcanvas id="myOffcanvas" placement="end">
  ...
</x-offcanvas>

<x-offcanvas id="myOffcanvas" placement="top">
  ...
</x-offcanvas>

<x-offcanvas id="myOffcanvas" placement="bottom">
  ...
</x-offcanvas>

---

# Alternative way to set placement

Use prop start , end , top , and bottom to set placement.

<x-offcanvas id="myOffcanvas" start>
  ...
</x-offcanvas>

<x-offcanvas id="myOffcanvas" end>
  ...
</x-offcanvas>

<x-offcanvas id="myOffcanvas" top>
  ...
</x-offcanvas>

<x-offcanvas id="myOffcanvas" bottom>
  ...
</x-offcanvas>

---

# Prop bp

Use prop bp (breakpoint) for control responsive offcanvas which hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, bp="lg" hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint.

<x-button toggle="offcanvas" target="#myOffcanvas">Launch default offcanvas</x-button>

<x-offcanvas id="myOffcanvas" bp="sm">
  ...
</x-offcanvas>

<x-offcanvas id="myOffcanvas" bp="md">
  ...
</x-offcanvas>

<x-offcanvas id="myOffcanvas" bp="lg">
  ...
</x-offcanvas>

<x-offcanvas id="myOffcanvas" bp="xl">
  ...
</x-offcanvas>

<x-offcanvas id="myOffcanvas" bp="xxl">
  ...
</x-offcanvas>

---

# Prop backdrop and scroll

Scrolling the body element is disabled when an offcanvas and its backdrop are visible. Use the prop scroll to enable body scrolling. When backdrop="static" the offcanvas will not close when clicking outside of it.

<!-- Disable backdrop and enable body scrolling -->
<x-offcanvas id="myOffcanvas" backdrop="false" scroll>
  ...
</x-offcanvas>

<!-- Enable backdrop and body scrolling -->
<x-offcanvas id="myOffcanvas" backdrop="true" scroll>
  ...
</x-offcanvas>

<!-- Set static backdrop -->
<x-offcanvas id="myOffcanvas" backdrop="static">
  ...
</x-offcanvas>