Off-canvas

Create a smooth off-canvas sidebar that slides in and out of the page.

The Off-canvas component is perfect for building a mobile navigation, similar to those which are popular with many native mobile apps, where a single button in the upper left corner toggles an off-canvas sidebar with a menu.

Usage

The Off-canvas component consists of an overlay and an off-canvas bar.

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

Example

Markup

<!-- This is an anchor toggling the off-canvas sidebar -->
<a href="#my-id" data-uk-offcanvas>...</a>

<!-- This is a button toggling the off-canvas sidebar -->
<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button>

<!-- This is the off-canvas sidebar -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">...</div>
</div>

Animation Modes

You can choose between four different animation modes how the off-canvas bar should appear:

Example

Markup

<a href="#my-id" data-uk-offcanvas="{mode:'slide'}">...</a>

<a href="#my-id" data-uk-offcanvas="{mode:'reveal'}">...</a>

<a href="#my-id" data-uk-offcanvas="{mode:'none'}">...</a>

Flip modifier

Add the .uk-offcanvas-bar-flip class to the off-canvas bar to adjust its alignment, so that it slides in from the right.

Example

Markup

<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar uk-offcanvas-bar-flip">...</div>
</div>

Off-canvas navs

An off-canvas sidebar can contain a nav from the Nav component. Add the .uk-nav-offcanvas class to style the nav according to the off-canvas context.

Example

Markup

<!-- This is the button toggling the off-canvas sidebar -->
<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button>

<!-- This is the off-canvas sidebar -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        <ul class="uk-nav uk-nav-offcanvas" data-uk-nav>...</ul>
    </div>
</div>

Off-canvas panels

You can place any custom content inside the off-canvas bar. Just wrap it with a <div> and add the .uk-panel class.

Example

Markup

<!-- This is the button toggling the off-canvas sidebar -->
<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button>

<!-- This is the off-canvas sidebar -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        <div class="uk-panel">...</div>
    </div>
</div>

JavaScript

You can open and close the offcanvas via JavaScript:

// Show an off-canvas matching the passed CSS selector
UIkit.offcanvas.show('#my-id');

// Hide any active offcanvas. Set force to true, if you don't want any animation.
UIkit.offcanvas.hide([force = false])

JavaScript options

This is an example of how to set options via attribute:

data-uk-offcanvas="{mode:'slide'}"