arca-ui

Sidebar

Navigation sidebars as a Level 2 container, with flat nested controls.

Basic Layout

Dashboard
Metric
#1
1000
Nested cards stay at Level 2.
Metric
#2
1128
Nested cards stay at Level 2.
Metric
#3
1256
Nested cards stay at Level 2.
Metric
#4
1384
Nested cards stay at Level 2.
Metric
#5
1512
Nested cards stay at Level 2.
Metric
#6
1640
Nested cards stay at Level 2.
Metric
#7
1768
Nested cards stay at Level 2.
Metric
#8
1896
Nested cards stay at Level 2.
Metric
#9
2024
Nested cards stay at Level 2.
Metric
#10
2152
Nested cards stay at Level 2.
Metric
#11
2280
Nested cards stay at Level 2.
Metric
#12
2408
Nested cards stay at Level 2.

Variants

Dashboard
Metric
#1
1000
Nested cards stay at Level 2.
Metric
#2
1128
Nested cards stay at Level 2.
Metric
#3
1256
Nested cards stay at Level 2.
Metric
#4
1384
Nested cards stay at Level 2.
Metric
#5
1512
Nested cards stay at Level 2.
Metric
#6
1640
Nested cards stay at Level 2.
Metric
#7
1768
Nested cards stay at Level 2.
Metric
#8
1896
Nested cards stay at Level 2.
Metric
#9
2024
Nested cards stay at Level 2.
Metric
#10
2152
Nested cards stay at Level 2.
Metric
#11
2280
Nested cards stay at Level 2.
Metric
#12
2408
Nested cards stay at Level 2.
Dashboard
Metric
#1
1000
Nested cards stay at Level 2.
Metric
#2
1128
Nested cards stay at Level 2.
Metric
#3
1256
Nested cards stay at Level 2.
Metric
#4
1384
Nested cards stay at Level 2.
Metric
#5
1512
Nested cards stay at Level 2.
Metric
#6
1640
Nested cards stay at Level 2.
Metric
#7
1768
Nested cards stay at Level 2.
Metric
#8
1896
Nested cards stay at Level 2.
Metric
#9
2024
Nested cards stay at Level 2.
Metric
#10
2152
Nested cards stay at Level 2.
Metric
#11
2280
Nested cards stay at Level 2.
Metric
#12
2408
Nested cards stay at Level 2.

API Reference

Sidebar is a composed layout built on Radix primitives and a shared SidebarProvider.

Key Components

ComponentNotes
SidebarProviderControls open/collapsed state (use defaultOpen for initial state).
SidebarUse variant ("sidebar" | "floating" | "inset") and collapsible ("offcanvas" | "icon" | "none").
SidebarInsetMain content area that reacts to sidebar state via peer styles.
SidebarTriggerToggles the sidebar (desktop collapse / mobile sheet).