Sidenav

Create overlay, push, or fixed side drawers with canonical vd-sidenav-* variants.

Sidenav Demo

Basic Structure

<!-- Trigger button -->
<button class="vd-btn vd-btn-primary" data-sidenav-toggle="#demo-sidenav">
  Open Sidenav
</button>

<aside class="vd-sidenav" id="demo-sidenav" aria-label="Menu">
  <div class="vd-sidenav-header">
    <h3 class="vd-sidenav-title">Menu</h3>
    <button class="vd-sidenav-close" aria-label="Close">&times;</button>
  </div>
  <div class="vd-sidenav-body">
    <ul class="vd-sidenav-nav">
      <li class="vd-sidenav-item active"><a class="vd-sidenav-link" href="#">Overview</a></li>
      <li class="vd-sidenav-item"><a class="vd-sidenav-link" href="#">Settings</a></li>
    </ul>
  </div>
</aside>

Variants

Class	Purpose
`.vd-sidenav-right`	Open from right side
`.vd-sidenav-push`	Push content on desktop
`.vd-sidenav-fixed`	Persistent desktop sidebar
`.vd-sidenav-sm`	Small width (233px)
`.vd-sidenav-lg`	Large width (377px)

Runtime state classes: .is-open on sidenav and .body-sidenav-open on body.

CSS Variables

Variable	Default
`--vd-sidenav-width`	`233px`
`--vd-sidenav-width-lg`	`377px`
`--vd-sidenav-bg`	`var(--vd-color-white)`
`--vd-sidenav-overlay-bg`	`rgba(0, 0, 0, 0.35)`
`--vd-sidenav-z-index`	`1040`
`--vd-sidenav-overlay-z-index`	`1030`
`--vd-sidenav-transition`	`transform var(--vd-transition-duration-slow) var(--vd-transition-ease)`

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

API Reference

Class Name / Attribute	Description	Type
`.vd-sidenav`	Base container for the off-canvas side drawer.	Component
`.vd-sidenav-header`	Header area containing the title and close button.	Layout
`.vd-sidenav-title`	Typography class for the sidenav header text.	Element
`.vd-sidenav-close`	Button to explicitly close the sidenav.	Action
`.vd-sidenav-body`	Scrollable content container for the main drawer area.	Layout
`.vd-sidenav-nav`	Wrapper for an unordered list of navigation items.	Layout
`.vd-sidenav-item`	Individual list item. Add .active for current state.	Component
`.vd-sidenav-link`	Clickable anchor element within a sidenav item.	Element
`.vd-sidenav-[variant]`	Modifiers defining behavior/positioning (-right, -push, -fixed, -sm, -lg).	Modifier
`data-sidenav-toggle="#id"`	Attribute placed on any trigger element (like a button) to open/close the targeted sidenav.	Attribute