Sidebar — Veritheme

Default

Simple sidebar with icon links and active state.

html

A

App Name

<aside class="vt-w-64 vt-border-r vt-bg-surfaces-surface vt-h-screen">
  <div class="vt-p-4 vt-border-b">
    <span class="vt-font-bold">App Name</span>
  </div>
  <nav class="vt-p-3 vt-space-y-1">
    <a class="vt-sidebar-link vt-active">Dashboard</a>
    <a class="vt-sidebar-link">Projects</a>
    <a class="vt-sidebar-link">Team</a>
    <a class="vt-sidebar-link">Settings</a>
  </nav>
</aside>

With Groups

Sidebar with labeled section groups.

html

Workspace

<aside class="vt-w-64 vt-border-r">
  <nav class="vt-p-3">
    <p class="vt-text-xs vt-font-semibold vt-uppercase">Main</p>
    <a>Dashboard</a>
    <a>Analytics</a>
    <p class="vt-text-xs vt-font-semibold vt-uppercase">Settings</p>
    <a>Profile</a>
    <a>Billing</a>
  </nav>
</aside>

Collapsible Sections

Sidebar with expandable/collapsible groups.

html

File Manager

<aside class="vt-w-64 vt-border-r">
  <nav class="vt-p-3">
    <button>Projects <svg><!-- ChevronDown --></svg></button>
    <div class="vt-pl-8">
      <a>Active</a>
      <a>Archived</a>
    </div>
  </nav>
</aside>

Compact

Collapsed sidebar with icon-only navigation.

html

A

<aside class="vt-w-64 vt-border-r vt-bg-surfaces-surface vt-h-screen">
  <div class="vt-p-4 vt-border-b">
    <span class="vt-font-bold">App Name</span>
  </div>
  <nav class="vt-p-3 vt-space-y-1">
    <a class="vt-sidebar-link vt-active">Dashboard</a>
    <a class="vt-sidebar-link">Projects</a>
    <a class="vt-sidebar-link">Team</a>
    <a class="vt-sidebar-link">Settings</a>
  </nav>
</aside>

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-primary/10 vt-text-info-primary`	State	Active link — tinted background with accent text color
`vt-text-mains-secondary`	State	Inactive link text color
`vt-hover:bg-surfaces-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