Sidebar 12 - Dual sidebar with metrics panel

Pro

A dual sidebar layout with left app navigation, a right metrics menu of compact labels, and a breadcrumb header between them.

Shadcn Sidebar 12 block

Component data

ID
sidebar12
Access
pro
Created
Jan 25, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Sidebar 12 block design & features

Sidebar12 is a three-column shell built with shadcn/ui. The left rail is a full app sidebar: workspace switcher, search, grouped links with nested projects, and a user footer. The center is the usual breadcrumb header and muted canvas. The right rail is a sticky, non-collapsing panel titled Dashboard. It lists compact metric keys under Metrics, Revenue, Users, and Events, with labels such as overview, page_views, mrr, and cohorts.

The left rail uses standard icon rows and section labels. The right rail is denser and text-only: tiny uppercase headings, muted single-line keys, and a hairline border on its inner edge. Active keys sit on a muted chip. The contrast in density is the main visual cue.

The overall feel is an analytics console rather than a generic dashboard. Dual rails are less common than a single nav column, and the underscore-style metric keys push it toward a technical product. This is an elaborate, content-driven block. You need a real app tree on the left and a believable metrics taxonomy on the right.

The metrics panel hides below large breakpoints, leaving the left rail and the center canvas.