You can use any element to toggle an off-canvas sidebar. To enable the necessary JavaScript, add the uk-toggle attribute. An <a> element needs to be linked to the id of the off-canvas container. If you are using another element, like a button, just add the uk-toggle="target: #ID" attribute to target the id of the off-canvas container.

Open

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Overlay

To add an overlay, blanking out the page, add the overlay: true parameter to the uk-offcanvas attribute.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Flip modifier

Add the flip: true parameter to the uk-offcanvas attribute to adjust its alignment, so that it slides in from the right.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Animation modes

By default, the off-canvas slides in. But you can actually choose between different animation modes for the off-canvas' entrance. Just add one of the following attributes

<div id="my-id" uk-offcanvas="mode: push">...</div>
Parameter Description
mode: slide The off-canvas slides out and overlays the content. This is the default mode.
mode: push The off-canvas slides out and pushes the site.
mode: reveal The off-canvas slides out and reveals its content while pushing the site.
mode: none The off-canvas appears and overlays the content without an animation.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Side nav

You can use the Side nav inside an off-canvas to create a mobile navigation or Custom navigation

Open

© 2019 Sasuke. All Rights Reserved.