Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
July 16, 2024 /  Beginner

OffCanvas Menu

OffCanvas Menu· Demo

How it works

OffCanvas Menu contains a “Burger” and “OffCanvas Content” element that is a nestable block element. You can put any elements at it, like you would do at a Bricks block or container.
It is very common to set OffCanvas elements with overflows, so that users can scroll “OffCanvas Content”, specially at mobile devices. “OffCanvas Content” element is a clip-path, you don’t need to know about this property, but only that it won’t allow overflows right at “OffCanvas Content” element. So, what we should do if we need content to overflow? just set a block inside “OffCanvas Content” that will act as the content wrapper and set your heights and overflows at it as needed 🙂

Settings controls

Type: determines the origin of the offcanvas: From Left, From Right or From Top. The demo is From Right.
Duration
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.
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.

Backdrop animation controls

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

– Tamu

On this page