Sidebar

Vertical navigation panel for app layouts with links, groups, and collapsible sections.

Default

Simple sidebar with icon links and active state.

html

App Name

<div class="vt-w-64 vt-rounded-2xl vt-border vt-border-border-default vt-bg-surface-card vt-overflow-hidden vt-relative vt-inline-997131a05f">
  <div class="vt-px-5 vt-py-4 vt-border-b vt-border-border-default">
    <div class="vt-flex vt-items-center vt-gap-2">
      <div class="vt-w-7 vt-h-7 vt-rounded-lg vt-bg-info-fill vt-flex vt-items-center vt-justify-center">
        <span class="vt-text-xs vt-font-bold vt-text-generic-white">A</span>
      </div>
      <span class="vt-text-sm vt-font-bold">App Name</span>
    </div>
  </div>
  <nav class="vt-p-3 vt-space-y-0.5">
    <a class="vt-nav-item vt-active">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-house vt-w-4 vt-h-4">
        <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
      </svg> Dashboard
    </a>
    <a class="vt-nav-item">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-layout-dashboard vt-w-4 vt-h-4">
        <rect width="7" height="9" x="3" y="3" rx="1"></rect><rect width="7" height="5" x="14" y="3" rx="1"></rect><rect width="7" height="9" x="14" y="12" rx="1"></rect><rect width="7" height="5" x="3" y="16" rx="1"></rect>
      </svg> Projects
    </a>
    <a class="vt-nav-item">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-users vt-w-4 vt-h-4">
        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle>
      </svg> Team
    </a>
    <a class="vt-nav-item">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chart-column vt-w-4 vt-h-4">
        <path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path>
      </svg> Analytics
    </a>
    <a class="vt-nav-item">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-mail vt-w-4 vt-h-4">
        <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect>
      </svg> Messages
      <span class="vt-count-badge vt-ml-auto">3</span>
    </a>
    <a class="vt-nav-item">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-settings vt-w-4 vt-h-4">
        <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle>
      </svg> Settings
    </a>
  </nav>
  <div class="vt-mt-auto vt-p-3 vt-border-t vt-border-border-default vt-inline-9a50b240ae">
    <a class="vt-nav-item vt-muted">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-circle-question-mark vt-w-4 vt-h-4">
        <circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path>
      </svg> Help &amp; Support
    </a>
  </div>
</div>

With Groups

Sidebar with labeled section groups.

html

Workspace

<div class="vt-w-64 vt-rounded-2xl vt-border vt-border-border-default vt-bg-surface-card vt-overflow-hidden vt-inline-0951e90987">
  <div class="vt-px-5 vt-py-4 vt-border-b vt-border-border-default">
    <span class="vt-text-sm vt-font-bold">Workspace</span>
  </div>
  <nav class="vt-p-3">
    <p class="vt-section-label vt-px-3 vt-py-2">Main</p>
    <div class="vt-space-y-0.5">
      <a class="vt-nav-item vt-active">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-house vt-w-4 vt-h-4">
          <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
        </svg> Dashboard
      </a>
      <a class="vt-nav-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chart-column vt-w-4 vt-h-4">
          <path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path>
        </svg> Analytics
      </a>
      <a class="vt-nav-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-file-text vt-w-4 vt-h-4">
          <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path>
        </svg> Documents
      </a>
    </div>
    <p class="vt-section-label vt-px-3 vt-py-2 vt-mt-4">Account</p>
    <div class="vt-space-y-0.5">
      <a class="vt-nav-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-settings vt-w-4 vt-h-4">
          <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle>
        </svg> Settings
      </a>
      <a class="vt-nav-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-credit-card vt-w-4 vt-h-4">
          <rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line>
        </svg> Billing
      </a>
      <a class="vt-nav-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-shield vt-w-4 vt-h-4">
          <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
        </svg> Security
      </a>
    </div>
  </nav>
</div>

Collapsible Sections

Sidebar with expandable/collapsible groups.

html

File Manager

<div class="vt-card vt-w-64 vt-overflow-hidden vt-inline-13f675f320" data-sidebar-demo="">
  <div class="vt-px-5 vt-py-4 vt-border-b vt-border-border-default">
    <span class="vt-text-sm vt-font-bold">File Manager</span>
  </div>
  <nav class="vt-p-3 vt-space-y-0.5">
    <a class="vt-nav-item vt-active">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-house vt-w-4 vt-h-4">
        <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
      </svg> Overview
    </a>
    <!-- Collapsible: Projects (open) -->
    <div data-sidebar-collapsible="" class="open">
      <button type="button" class="vt-nav-item vt-w-full vt-justify-between">
        <span class="vt-flex vt-items-center vt-gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-folder vt-w-4 vt-h-4">
            <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path>
          </svg> Projects</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down vt-w-3.5 vt-h-3.5 vt-text-foreground-muted vt-transition-transform vt-duration-200 vt-sidebar-demo-chevron">
          <path d="m6 9 6 6 6-6"></path>
        </svg>
      </button>
      <div class="vt-sidebar-demo-children vt-pl-10 vt-space-y-0.5 vt-mt-0.5">
        <a class="vt-nav-item-sub">Active</a>
        <a class="vt-nav-item-sub">Archived</a>
        <a class="vt-nav-item-sub">Drafts</a>
      </div>
    </div>
    <!-- Collapsible: Favorites (closed) -->
    <div data-sidebar-collapsible="">
      <button type="button" class="vt-nav-item vt-w-full vt-justify-between">
        <span class="vt-flex vt-items-center vt-gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-star vt-w-4 vt-h-4">
            <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
          </svg> Favorites</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down vt-w-3.5 vt-h-3.5 vt-text-foreground-muted vt-transition-transform vt-duration-200 vt-sidebar-demo-chevron">
          <path d="m6 9 6 6 6-6"></path>
        </svg>
      </button>
      <div class="vt-sidebar-demo-children vt-pl-10 vt-space-y-0.5 vt-mt-0.5">
        <a class="vt-nav-item-sub">Design System</a>
        <a class="vt-nav-item-sub">Landing Page</a>
      </div>
    </div>
    <a class="vt-nav-item">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-settings vt-w-4 vt-h-4">
        <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle>
      </svg> Settings
    </a>
  </nav>
</div>

Compact

Collapsed sidebar with icon-only navigation.

html

<div class="vt-w-16 vt-rounded-2xl vt-border vt-border-border-default vt-bg-surface-card vt-overflow-hidden vt-flex vt-flex-col vt-items-center vt-py-4 vt-gap-1 vt-inline-393bda6e03">
  <div class="vt-w-8 vt-h-8 vt-rounded-lg vt-bg-info-fill vt-flex vt-items-center vt-justify-center vt-mb-4">
    <span class="vt-text-xs vt-font-bold vt-text-generic-white">A</span>
  </div>
  <button class="vt-btn vt-btn-icon vt-bg-info-fill" title="Dashboard">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-house vt-w-4 vt-h-4 vt-text-generic-white">
      <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
    </svg>
  </button>
  <button class="vt-btn vt-btn-ghost vt-btn-icon" title="Projects">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-layout-dashboard vt-w-4 vt-h-4 vt-text-foreground-muted">
      <rect width="7" height="9" x="3" y="3" rx="1"></rect><rect width="7" height="5" x="14" y="3" rx="1"></rect><rect width="7" height="9" x="14" y="12" rx="1"></rect><rect width="7" height="5" x="3" y="16" rx="1"></rect>
    </svg>
  </button>
  <button class="vt-btn vt-btn-ghost vt-btn-icon" title="Team">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-users vt-w-4 vt-h-4 vt-text-foreground-muted">
      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle>
    </svg>
  </button>
  <button class="vt-btn vt-btn-ghost vt-btn-icon vt-relative" title="Notifications">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-bell vt-w-4 vt-h-4 vt-text-foreground-muted">
      <path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path>
    </svg>
    <span class="vt-absolute vt-top-2 vt-right-2 vt-w-2 vt-h-2 vt-rounded-full vt-bg-error-fill"></span>
  </button>
  <div class="vt-flex-1"></div>
  <button class="vt-btn vt-btn-ghost vt-btn-icon" title="Settings">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-settings vt-w-4 vt-h-4 vt-text-foreground-muted">
      <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle>
    </svg>
  </button>
</div>

Guidelines

App-level navigation frame: groups, links with active states, count badges.

Mark only the current page active; keep the rest default.

Don't

Don't highlight several items as active at the same time.

API Reference

All CSS classes available for the Sidebar component.

Class	Type	Description
`vt-w-64`	Layout	Standard sidebar width (256px)
`vt-border-r`	Layout	Right border separating sidebar from content
`vt-bg-info-fill/10 vt-text-info-fill`	State	Active link — tinted background with accent text color
`vt-text-foreground-secondary`	State	Inactive link text color
`vt-hover:bg-surface-subtle`	State	Hover background for inactive links
`vt-pl-10`	Modifier	Left padding for nested collapsible children
`vt-w-16`	Variant	Compact/icon-only sidebar width (64px)

Accessibility

Keyboard and screen reader support.

Feature	Details
Landmark	Use nav element with aria-label="Sidebar navigation"
Current	Active item should have aria-current="page"
Collapsible	Section toggles need aria-expanded and aria-controls
Keyboard	All links focusable via Tab, sections toggle via Enter/Space

Built with:

Link Icons Badge Separator