Offcanvas

Create an offcanvas sidebar that slides in and out of the page, which is perfect for creating mobile navigations.

Table of contents

• Usage
  • Overlay
• Flip modifier
• Animation modes
• Nav in Offcanvas
• Component options
• JavaScript
  • Initialization
  • Events
  • Methods
• Accessibility
  • Keyboard interaction

Usage

To apply this component, add the data-uk-offcanvas attribute to a parent <div> element and use the following classes.

Class	Description
.uk-offcanvas-bar	Add this class to a child <div> element.
.uk-offcanvas-close	Add this class and the data-uk-close attribute to an <a> or <button> element to create a close button and enable its functionality.

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

Overlay

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

Flip modifier

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

Animation modes

By default, the offcanvas slides in. But you can actually choose between different animation modes for the offcanvas’s entrance. Just add one of the following attributes.

Parameter	Description
mode: slide	The offcanvas slides out and overlays the content. This is the default mode.
mode: push	The offcanvas slides out and pushes the site.
mode: reveal	The offcanvas slides out and reveals its content while pushing the site.
mode: none	The offcanvas appears and overlays the content without an animation.

Nav in Offcanvas

You can use the Nav component inside an offcanvas to create a mobile navigation.

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option	Value	Default	Description
mode	String	slide	Offcanvas animation mode (slide, reveal, push or none).
flip	Boolean	false	Flip offcanvas to the right side.
overlay	Boolean	false	Display the offcanvas together with an overlay.
esc-close	Boolean	true	Close the offcanvas when the Esc key is pressed.
bg-close	Boolean	true	Close the offcanvas when the background is clicked.
container	String	false	Define a target container via a selector to specify where the offcanvas should be appended in the DOM. Setting it to false will prevent this behavior.

mode is the Primary option and its key may be omitted, if it’s the only option in the attribute value.

JavaScript

Learn more about JavaScript components.

Initialization

Events

The following events will be triggered on elements with this component attached:

Name	Description
beforeshow	Fires before an item is shown.
show	Fires after an item is shown.
shown	Fires after the item’s show animation has completed.
beforehide	Fires before an item is hidden.
hide	Fires after an item’s hide animation has started.
hidden	Fires after an item is hidden.

Methods

The following methods are available for the component:

Show

Shows the Offcanvas.

Hide

Hides the Offcanvas.

Accessibility

The Offcanvas component adheres to the Dialog (Modal) WAI-ARIA design pattern and automatically sets the appropriate WAI-ARIA roles, states and properties.

• The offcanvas bar has the dialog role, and if the offcanvas has an overlay, the aria-modal property.

The Close component automatically sets the appropriate WAI-ARIA roles and properties.

• The close icon has the aria-label property, and if an <a> element is used, the button role.

Keyboard interaction

The Offcanvas component can be accessed through keyboard using the following keys.

• The esc key closes the offcanvas. This behaviour is disabled if the bg-close: false option is set.