This Pro tutorial provides the steps to set up an offcanvas panel in Bricks using Alpine.js.
Clicking on a button will slide open the panel from either left or right with the page getting a dark transparent backdrop. The offcanvas can be closed either by clicking anywhere on the backdrop or on the close button in the panel.
We shall create a Template of the type Section for the offcanvas content and render that Template's content inside the offcanvas.
Step 1
Let's load Alpine.js.
Add this in the Header Scripts textarea:
<script src="//unpkg.com/alpinejs" defer></script>If you want the offcanvas to appear sitewide, you would add this at Bricks → Settings → Custom Code.
If you want the offcanvas to appear only on a specific Page or all pages that use a specific Template, add it at PAGE SETTINGS → CUSTOM CODE.
Step 2
Create a Section-type Template named say, "Offcanvas Content" and add your desired offcanvas content inside.
You may want to put the elements at the root level w/o using a Section or a Container since we are going to add padding to the panel in a later step.
In the above example we placed a Shortcode generated by Fluent Forms.
Ex.:
[fluentform id="1"]Step 3
Add a Code element where you would like to display a button that should trigger the offcanvas.
