Offcanvas in Bricks using Alpine.js

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="//" 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.


[fluentform id="1"]

Step 3

Add a Code element where you would like to display a button that should trigger the offcanvas.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Instant access to 390+ Bricks code tutorials with BricksLabs Pro