Jose Tamu
January 10, 2025 /
Intermediate

Multi Offcanvas Menu

How it works

Multi OffCanvas Menu consists of a collection of nested OffCanvas elements.
The initial OffCanvas is “OffCanvas Content” element, and all of your initial content has to be set here, including the toggles (at least the open toggles) used by “Sub OffCanvas” elements.
“OffCanvas Content” element is also the wrapper for all “Sub OffCanvas” elements.

Content tab

Settings group

Custom toggle: menu’s toggle will be the Burger that comes with it by default but you can set your own here passed by it’s classname.

Animation group

Type: determines the origin of the initial offcanvas: From Left, From Right or From Top. The demo is From Right..
Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Backdrop Animation group

Multi OffCanvas Menu contains a backdrop, it’s background can be set right here.
Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

SubOffcanvas items

Settings group

Open toggle: he element that will open this Sub OffCanvas passed by it’s classname.
Close toggle: the element that will close this Sub OffCanvas passed by it’s classname.
The same element can be used at both Open toggle and Close toggle, so it will just act as a normal toggle.

Animation group

Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.