50% discount on BricksLabs Pro Membership Lifetime Access. Use coupon: GOBRICKS

Offcanvas in Bricks using Alpine.js

offcanvas-bricks-alpinejs

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.

This is a Pro members-only tutorial.

To get full access, login below or sign up for a Pro Account

  • Yorgos Kastritseas

    can that not be achieved with the off canvas? I mean why use this since we have ( if it is possible ) the off canvas combined with the burger trigger?

    • A

      Yes. OffCanvas + Burger Trigger of BricksExtras is easier to use to set up the same.

      The purpose of this tutorial is to provide a real-life example of how Alpine.js can be used in WordPress, especially Bricks.

Leave your comment