Off Canvas

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.

View Live Preview to see the off-canvas in action.

Option Controls

Open / Close Trigger Selector

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

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.

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.

Stagger scroll animations

Elements inside of the off-canvas can take advantage of Oxygen’s built-in scroll animations as a way to provide a smooth reveal as the off-canvas opens. The elements will animate each time the off-canvas is opened.

Staggering animations means adding a slight delay to each element in order, so they reveal gradually from the top to the bottom instead of all at the same time (or having to manually increase the delay for each one)

First element delay – set the delay time on the first element found inside the off-canvas with an animation applied. (This will be best to roughly match the time it takes for your off-canvas to open)

Delay each animation by – each delay will be increased by this amount of time (ms). The default is 50ms.

Animation reset timing – The animations need to reset to their starting positioned when the off-canvas is closed, so they can be re-revealed when the off-canvas is opened. This happens by default after 400ms of closing the off-canvas. If however, the off-canvas is set to close more slowly than that, you may wish to change this timing to prevent the reset happening while the off-canvas is still closing.

If you wish to add animations to elements inside the off-canvas, but don’t want them to be part of the staggered delay, you can give them the class ‘not-staggered’ to ensure they are not included.

Tip

The offcanvas will automatically close if any hash-links are clicked from inside the offcanvas. This is designed to allow for adding scroll-to links inside menus that lead the user further down to the page.

chevron-down