Off Canvas

The components let’s you add an off canvas ‘wrapper’ sliding both in/out from either side of the viewport. Any elements can be added inside. The off canvas can be open or closed by default and any selector can act as a trigger to toggle.

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.

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