The Off-Canvas component allows you to keep content offscreen ready to be revealed by clicking on any element.

Here are some examples

Although any element can be used to trigger the offcanvas reveal, the burger trigger was built specifically.

Unlike with the modal, the slide animation is smooth both in & out. Click anywhere on the backdrop to close, the burger will close itself.

Forms inside the offcanvas will function flawlessly as the element is never actually hidden, it's just out of view.

Notice how we set the focus straight to the form input, so the user can start typing immediately.

You can close by press ESC, clicking the backdrop or the button below
Go back

Elements inside the offcanvas all have support for Oxygen's built-in scroll animations, triggered everytime the offcanvas is opened.

Each fade can be automatically staggered

Each fade can be automatically staggered

Each fade can be automatically staggered

Each fade can be automatically staggered

Each fade can be automatically staggered

Each fade can be automatically staggered

Each fade can be automatically staggered

Performance tip - this video is only fetched if the offcanvas is opened.
Any element can be used as the close trigger from inside the offcanvas.
Click to Close

Multiple offcanvas' can be used with the same trigger, which opens up possibilities like split screen

It's just creates a nice reveal.

Or adding a second blank offcanvas with a colored background with a lower transition time to appear first.

play-circlepause-circlechevron-down