Guide

Offcanvas

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

Usage

Use the vk-offcanvas component to render an offcanvas sidebar and an optional overlay that blanks out the page. The offcanvas display is controlled with the show prop.

<vk-offcanvas-content>

  <!-- the whole content goes here -->

  <vk-offcanvas show>
    <vk-offcanvas-close></vk-offcanvas-close>
  </vk-offcanvas>

</vk-offcanvas-content>
Open

Note In the demo we are setting the show prop with a sync modifier to give the offcanvas the possibility to control the display.

Overlay

To add an overlay, blanking out the page, add the overlay prop.

<vk-offcanvas overlay>...</vk-offcanvas>

Flip modifier

Add the flipped prop to adjust the offcanvas alignment, so that it slides in from the right.

<vk-offcanvas flipped>...</vk-offcanvas>

Animation modes

By default, the offcanvas slides in. But you can actually choose between different animation modes for the offcanvas' entrance. Just set the prop mode with one of the following options.

Mode Description
slide The offcanvas slides out and overlays the content. This is the default mode.
push The offcanvas slides out and pushes the site.
reveal The offcanvas slides out and reveals its content while pushing the site.
none The offcanvas appears and overlays the content without an animation.
<vk-offcanvas mode="push">...</vk-offcanvas>

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

<vk-offcanvas>
  <vk-nav>...</vk-nav>
</vk-offcanvas>

Props

vk-offcanvas

Name Type Default Description
show Boolean false The display state.
stuck Boolean false Determines if the modal should be kept open when the background was clicked.
flipped Boolean false Changes the offcanvas alignment so that it slides in from the right.
overlay Boolean false Displays an overlay blanking out the page.
mode String slide The animation mode with options as none, slide, push or reveal.

vk-modal-close

Name Type Default Description
large Boolean false Displays a larger icon.