Off-canvas — Layout

Offcanvas

Extend the Sidenav into a full offcanvas panel that slides in from any edge. Uses the existing useSidenav API with positional modifiers.

Left (Default)

Right

Top

<!-- Top offcanvas panel -->
<button data-sidenav-toggle="#offcanvas-top">
  Open Top
</button>

<aside class="vd-offcanvas vd-offcanvas-top"
       id="offcanvas-top"
       data-vd-position="top">
  <div class="vd-sidenav-header">
    <h3 class="vd-sidenav-title">Top Panel</h3>
    <button class="vd-sidenav-close">&times;</button>
  </div>
  <div class="vd-sidenav-body">...</div>
</aside>

Bottom

<!-- Bottom offcanvas panel -->
<aside class="vd-offcanvas vd-offcanvas-bottom"
       data-vd-position="bottom">
  ...
</aside>

Using `data-vd-position`

You can set the slide direction entirely through the data-vd-position attribute instead of adding directional CSS classes. The JS reads this attribute at init time and applies the correct transform.

<!-- Direction via data attribute only -->
<aside class="vd-offcanvas" data-vd-position="top">...</aside>
<aside class="vd-offcanvas" data-vd-position="right">...</aside>
<aside class="vd-offcanvas" data-vd-position="bottom">...</aside>
<aside class="vd-offcanvas" data-vd-position="left">...</aside>

API Reference

Wiring

import { ref } from 'vue';
import { useSidenav } from "@vanduo-oss/vd3";

const root = ref<HTMLElement | null>(null);
useSidenav(root);   // wires [data-sidenav-toggle] triggers; cleanup on unmount

CSS Classes

Class	Description	Type
`.vd-offcanvas`	Base offcanvas panel — extends .vd-sidenav behaviour	Base
`.vd-offcanvas-top`	Slide from the top edge (full-width)	Modifier
`.vd-offcanvas-bottom`	Slide from the bottom edge (full-width)	Modifier
`.vd-offcanvas-right`	Slide from the right edge	Modifier
`.vd-sidenav-top`	Legacy alias for .vd-offcanvas-top	Modifier
`.vd-sidenav-bottom`	Legacy alias for .vd-offcanvas-bottom	Modifier
`.is-open`	Applied when the panel is visible	State

Data Attributes

Attribute	Description	Default
`data-vd-position`	Set slide direction: top, right, bottom, or left	`left`
`data-sidenav-toggle`	Place on trigger element — value is the selector for the offcanvas (e.g. "#my-panel")	`—`

Composable API

Symbol	Description
`useSidenav(root)`	Composable — wires every [data-sidenav-toggle] trigger inside the root ref (overlay, close button, ESC, scroll-lock). Call once in setup().
`(automatic cleanup)`	Listeners and the body overlay are removed on component unmount.

Events

Event	Description	Detail
`sidenav:open`	Fired on the offcanvas element after it becomes visible	`{ position }`
`sidenav:close`	Fired on the offcanvas element after it is hidden	`{ position }`

Accessibility

Offcanvas uses role="dialog" and aria-modal="true" when open
Close button includes aria-label="Close" for assistive technology
Focus is trapped within the panel while open and returned to the trigger on close
Pressing Escape closes the offcanvas panel
Overlay backdrop blocks interaction with the page beneath
The trigger button uses aria-expanded reflecting open/closed state