Recipe

Sidebar navigation patterns

Three battle-tested sidebar layouts for dashboards, docs, and admin panels.

Collapsible sidebar

Icon-only when collapsed, full labels when expanded. Perfect for dense dashboards where screen real estate matters.

Use w-16 collapsed, w-56 expanded with a state toggle.

Recursive expand/collapse sections for documentation or file explorers. Indentation communicates hierarchy.

▼ Getting started

Installation

Configuration

▶ API reference

▶ Guides

Active item gets bg-[#8B5CF6]/10 text-[#8B5CF6].

Slides over content on mobile, fixed on desktop. The go-to for responsive admin layouts.

Combine fixed inset-y-0 z-40 with a backdrop overlay and translate-x transition.