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.
<!-- The button component -->
<div x-data="{}" class="offcanvas__button-wrapper">
<button class="brxe-button bricks-button lg bricks-background-primary" @click="$dispatch('offcanvas-ex')">Contact Us</button>
</div>
<!-- The offcanvas component -->
<div x-data="{offcanvas: false}">
<div
class="offcanvas__wrapper"
:class="{'active': offcanvas}"
x-on:offcanvas-ex.window="offcanvas = !offcanvas"
>
<div class="offcanvas__backdrop" style="display: none;" x-show="offcanvas" @click="offcanvas = false"></div>
<div class="offcanvas__panel offcanvas__panel--right" :class="{'active': offcanvas}">
<div class="offcanvas__close-button-wrapper">
<button class="offcanvas__close-button" @click="offcanvas = false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
</div>
<div class="offcanvas__body">
<?php echo do_shortcode( '[bricks_template id="2538"]' ); ?>
</div>
</div>
</div>
</div>The
brxe-button bricks-button lg bricks-background-primaryclasses are what get added when a Button element (large size) is added and inspected on the front end.
We are specifying what to load inside the offcanvas via
<?php echo do_shortcode( '[bricks_template id="2538"]' ); ?>Replace 2538 with the ID of your Template from the previous step.
If you would like to have the offcanvas panel slide in from the left, change
offcanvas__panel--rightto
offcanvas__panel--leftStep 4
Add this custom CSS in the correct location (sitewide or in the Page/Template):
.offcanvas__backdrop {
position: fixed;
z-index: 998;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
}
.offcanvas__panel {
background-color: #fff;
position: fixed;
min-height: 100%;
top: 0;
bottom: 0;
z-index: 999;
width: 400px;
overflow-y: auto;
transition: all .3s linear;
}
@media (max-width: 479px) {
.offcanvas__panel {
width: 80%;
}
}
.offcanvas__panel--left {
left: 0;
transform: translateX(-110%);
}
.offcanvas__panel--right {
right: 0;
transform: translateX(110%);
}
.offcanvas__panel--left.active,
.offcanvas__panel--right.active {
transform: translateX(0);
}
.offcanvas__close-button-wrapper {
display: flex;
justify-content: flex-end;
padding: 2rem 2rem 1rem 2rem;
}
.offcanvas__close-button {
background: none;
}
.offcanvas__body {
padding: 0 3rem 3rem 3rem;
}