Create an offcanvas sidebar that slides in and out of the page, which is perfect for creating mobile navigations.
To apply this component, add the data-z-offcanvas attribute to a parent <div> element and use the following classes.
| Class | Description |
|---|---|
.z-offcanvas-bar | Add this class to a child <div> element. |
.z-offcanvas-close | Add this class and the data-z-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-z-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-z-toggle="target: #ID" attribute to target the id of the offcanvas container.
<body>
<!-- This is a button toggling the offcanvas -->
<button data-z-toggle="target: #my-id" type="button"></button>
<!-- This is an anchor toggling the offcanvas -->
<a href="#my-id" data-z-toggle></a>
<!-- This is the offcanvas -->
<div id="my-id" data-z-offcanvas>
<div class="z-offcanvas-bar">
<button class="z-offcanvas-close absolute top-4 right-4" type="button" data-z-close></button>
</div>
</div>
</body>To add an overlay, blanking out the page, add the overlay: true parameter to the data-z-offcanvas attribute.
<div id="my-id" data-z-offcanvas="overlay: true">...</div>Add the flip: true parameter to the data-z-offcanvas attribute to adjust its alignment, so that it slides in from the right.
<div id="my-id" data-z-offcanvas="flip: true">...</div>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. |
<div id="my-id" data-z-offcanvas="mode: push">...</div>You can use the Nav component inside an offcanvas to create a mobile navigation.
<div id="my-id" data-z-offcanvas>
<div class="z-offcanvas-bar">
<ul class="z-nav z-nav-default">
...
</ul>
</div>
</div>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.
<span z-offcanvas="push"></span>Learn more about JavaScript components.
zUIkit.offcanvas(element, options);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. |
The following methods are available for the component:
zUIkit.offcanvas(element).show();Shows the Offcanvas.
zUIkit.offcanvas(element).hide();Hides the Offcanvas.
The Offcanvas component adheres to the Dialog (Modal) WAI-ARIA design pattern and automatically sets the appropriate WAI-ARIA roles, states and properties.
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.
aria-label property, and if an <a> element is used, the button role.The Offcanvas component can be accessed through keyboard using the following keys.
bg-close: false option is set.