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 backElements 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