The component enable you to add an off-canvas element sliding both in/out from either left/right/top/bottom of the viewport. Any elements can be added inside. The off-canvas can be open or closed by default with any selector being used as a trigger to toggle visibility.

Quick start workflow

The general workflow when adding an off-canvas to the page is the following..

• Add an off-canvas component and place in it the elements you need to appear.
• In the off-canvas settings, there is a Open / Close Trigger selector, the default is ‘.x-burger-trigger’. Change this to the selector you wish to use. Let’s say you choose ‘.open-off-canvas’.
• Once you’ve added your elements and gone through the settings for styling and set how you want the off-canvas to behave (see all the controls below). You can then hide the off-canvas inside the builder by selecting ‘hidden’ at the top under ‘in-builder visibility’ so you can continue building your page.
• Add an element that you wish to be the trigger, either a button or link or burger trigger is common.
• Give this element the class you chose, in this case, ‘open-offcanvas’.
• That’s it. The off-canvas will now open when the user clicks that element.,

Video Walkthrough

Here is a five-minute video showing the basics of setting up the offcanvas with a trigger to open it up and adding a menu inside..

Offcanvas Type

Slide – The offcanvas element will slide over the top of existing elements. It’s best to place to offcanvas at the bottom of the page in the structure panel, outside of any containers so it doesn’t inherit any styles (and doesn’t need to load first as it’s invisible on page load).

Push – For a push effect, you can choose a selector to move at the same time as the offcanvas. The distance and the timing can be set independent of the offcanvas settings. The most common use case of the push type offcanvas, where we want the entire site to push as the offcanvas is opened would be achieved by doing the following..

• Add offcanvas to the main template.
• The header, inner content & footer (and any other site wide elements) can be placed inside a new div, with a class say ‘.site-container’.
• The offcanvas is positioned at the bottom, outside of this container and the class ‘site-container’ is added in the settings as the content to push.

Note – depending on other CSS on your site, if you notice the container is actually being pushed outside of the browser window and is causing an unwanted horizontal scroll. Make sure to disable the ‘Site Scrolling When Open’ setting as mentioned below.

Open / Close Trigger Selector

Choose the selector that will act as the trigger to toggle the offcanvas when clicked. The default is ‘.x-burger-trigger’ which is the default class added to the burger toggle component. Any element can be used as the trigger.

Important – If not using the burger trigger component as the trigger, be sure to change the trigger selector to a different class. Then add that class to your chosen element you wish to use.

Visibility 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.

Slide in From

Switch between a left, right, top or bottom. If using the push type offcanvas, the direction of the content moving as the offcanvas opened will always match the offcanvas.

State on Page Load

Here you can set the off canvas element to be visible on page load, in which case the trigger selector would act as a close button when first clicked, instead of an open trigger.

Site Scrolling When Open

Default: enabled. If set to disabled, the site will not be scrollable when the off canvas is in it’s open state. This option is only available if the state on page load is set to closed.

Clicking outside the offcanvas closes it

Default: enabled. When the offcanvas is open, clicking anywhere else on the page will automatically close the offcanvas and toggle the trigger selector if the burger toggle component has been used. This option is only available if the state on page load is set to closed and if there is a backdrop overlaying the page.

Backdrop Display

The backdrop visibility can be hidden. This is useful if the offcanvas is being set to be open on page load where you would still need users to be able to click other elements on the page.

Esc key when focus in offcanvas closes it

Default: disabled. 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 when opened

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, or to add a specific selector.

The default for the selector is ‘.ff-el-input–content input’. This selector will be the first input found inside a fluent form. As the user opens the off-canvas, they can then instantly start typing to fill out the form. Whichever selector is chosen, the first found inside the off-canvas will be used.