OffCanvas

The element enables you to add an OffCanvas element sliding both in/out from either left/right/top/bottom of the viewport. The OffCanvas can be toggled open/closed by any selector being used as a trigger.

Tutorial

How to set up OffCanvas in Bricks

Note – there are two versions of the offcanvas element. Offcanvas and Offcanvas (template). The former supports nesting elements and is the more modern version, the template version is mainly for backward compatibility.

Quick start workflow

The general workflow when adding an OffCanvas to the page is the following:

  • Add an OffCanvas element to the page/template, ideally near the bottom outside of any sections.
  • In the OffCanvas settings, there is a Open / Close Trigger selector. Change this to the selector you wish to use for your button or link to toggle the offcanvas. Let’s say you choose .open-off-canvas.
  • You can then hide the OffCanvas inside the builder by enabling “hide in builder” at the top.
  • Add an element that you wish to be the trigger, either a button or link or burger trigger. Burger trigger is a common choice.
  • Give this element the class you chose, in this case, open-offcanvas.
  • That’s it. The OffCanvas will now open when the user clicks that element.

Primary Settings

Hide in Builder – Quick “hide” for when working in the builder so you can focus on building other elements. Has no effect on the front end.

OffCanvas Content – Currently it is currently not possible to nest elements inside the OffCanvas element. A Bricks Template having your desired OffCanvas content has to be selected. (when nesting elements is made available in Bricks itself, this will be added in a future update)

Click Trigger – Choose the selector that will act as the trigger to toggle the offcanvas when clicked. Any element can be used as the trigger. The Burger Toggle element works well as a button if you want an animated burger menu.

Slide in From – Choose which direction the offcanvas will start and slide in from. Left, right, top or bottom of the viewport.

Layout / Spacing

The ‘inner’ content part of the offcanvas, where the content is a flex container. Changing the flex alignments is a quick way to align of all the content inside.

There’s a default padding of 30px around the content, which can be changed in the layout/spacing tab.

Config

Clicking hashlink will close – If enabled, any hashlinks found in the offcanvas will close the offcanvas if clicked. This is useful for when creating links that move the user down the page, the offcanvas will close as the page scrolls.

Esc to close – This allows users to be able to close the canvas by just pressing the escape key. This is useful for when using the offcanvas for filling in forms, or if there is no backdrop and you want an easier way for the user to go back to the main site.

Move focus to offcanvas – This setting will allow you to deliver a smoother user experience, especially when using the offcanvas for forms or call to actions. You can either choose to move the focus to “offcanvas inner” which will move the focus just inside the offcanvas itself (this is the default), or to add a specific selector. A ‘selector inside offcanvas’ can be useful if you have a particular link or button or form input, where you want the user to click or start typing immediately.

Prevent Scroll When Open – This setting will add overflow hidden to the html/body elements when the offcanvas is open, preventing the user from being able to scroll the page until the offcanvas is closed.

Sync Burger Triggers – If you’re using two seperate burger triggers. For eg, one in the header and one inside the offcanvas content itself. This setting will keep the burger animations synced so when the user clicks the inner one to close, the other one will animate to close automatically.

Force second offcanvas to close – If you have two offcanvas’ using the same click trigger. This means they will both open when the trigger is clicked. Enable this setting to make sure that if one offcanvas is closed (for eg if the backdrop is clicked) that it will close the other one also.

Backdrop

Disable backdrop – Will completely remove the backdrop, meaning the site will be clickable even when the offcanvas is open.

Click backdrop to close – Enabled by default. if disabled, the user won’t be able to click the rest of the site (due to the backdrop being there) but also won’t be able to close the offcanvas by clicking it. Only disable this if you’re adding another way to close the offcanvas, like you’re own button.

z-index – Depending on your page design and content, you may need to increase the z-index on the offcanvas if some elements on the page are still visible and appearing above it.

Accessibility

Aria-label – Change the aria-label for the offcanvas content to something better descriptive of the content inside. By default it is just ‘offcanvas’.

Add aria-controls to trigger – This will make sure the correct aria-controls attribute & value is added to the button/link you’re using as the trigger. Disable if you’re adding it yourself.

Prefers reduce motion – Choose to remove the slide in and choose to either ‘fade’ or ‘no transition’ for users that have reduce motion set in their browser.

Styling

Note that the ‘style tab’ containing all the CSS properties, will be applied to the ‘offcanvas inner’ (ie the container of the content inside the offcanvas, not the element’s wrapper).


Developer Docs: Triggering & Events

You can also open/close the OffCanvas programmatically with JS with the xOpenOffCanvas() and xCloseOffCanvas() functions.

Just pass in the ID of your OffCanvas, eg if the OffCanvas ID is offcanvas-1:

xOpenOffCanvas( 'offcanvas-1' )

The OffCanvas also triggers events when opening and closing. You can listen for the events x_offcanvas:open and x_offcanvas:close to run your code as they happen.

Sample code:

const offcanvas = document.getElementById('offcanvas-1');

offcanvas.addEventListener("x_offcanvas:open", function() {
 // do something here when offcanvas opens
});

offcanvas.addEventListener("x_offcanvas:close", function() {
 // do something here when offcanvas closes
});

An example use case for these events would be making sure a video player stops playing inside the OffCanvas when the OffCanvas closes. Or running some code to capture how many time the offcanvas has been opened for analytics.


Support FAQ

The OffCanvas is no longer fixed to the viewport correctly – Fixed positioned elements, for eg Modals, OffCanvas, can’t be placed inside of containers that have transforms applied. (due to how CSS works). It’s most likely that you’ve placed the OffCanvas inside a header that is using a transform to hide the header on scroll. The solution is to add the OffCanvas inside the footer template instead.

How to show WP Grid Builder’s Grid inside the OffCanvas?

Add this in a Code element:

<script>
document.addEventListener("DOMContentLoaded", function(e) {

	window.WP_Grid_Builder && WP_Grid_Builder.on('init', function(wpgb) {

		const offcanvas = document.getElementById('brxe-kromrj'); /* change brxe-kromrj to your offcanvas ID */

		/* listening for offcanvas to open */
		offcanvas.addEventListener("x_offcanvas:open", function() {
			/* running WPGB method to set the layout */
			wpgb.grid.layout();
		});

	});

});
</script>

Reference.