Sidebar — uicraft

Default

Simple sidebar with icon links and active state.

html

A

App Name

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

With Groups

Sidebar with labeled section groups.

html

Workspace

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

Collapsible Sections

Sidebar with expandable/collapsible groups.

html

File Manager

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

Compact

Collapsed sidebar with icon-only navigation.

html

A

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

API Reference

All CSS classes available for the Sidebar component.

Class	Type	Description
`uc-w-64`	Layout	Standard sidebar width (256px)
`uc-border-r`	Layout	Right border separating sidebar from content
`uc-bg-accents-blue/10 uc-text-accents-blue`	State	Active link — tinted background with accent text color
`uc-text-fg-secondary`	State	Inactive link text color
`uc-hover:bg-neutrals-subtle`	State	Hover background for inactive links
`uc-pl-10`	Modifier	Left padding for nested collapsible children
`uc-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