playground

Mix variant, collapse mode and side. Use the trigger, the rail on the edge, or the shortcut.

Dashboard

Revenue

$48,210

Orders

1,204

Returns

2.1%

Press Cmd or Ctrl and B while the pointer is over this frame to toggle the sidebar. Below 768px the sidebar becomes a sheet.

groups

Labelled groups with nested pages and a badge.

Basics

Revenue

$48,210

Orders

1,204

Returns

2.1%

Press Cmd or Ctrl and B while the pointer is over this frame to toggle the sidebar. Below 768px the sidebar becomes a sheet.

collapsible groups

Workspace and Archive fold. Analytics and Settings hold nested pages.

Reports

Revenue

$48,210

Orders

1,204

Returns

2.1%

Press Cmd or Ctrl and B while the pointer is over this frame to toggle the sidebar. Below 768px the sidebar becomes a sheet.

rail and icon only

Collapses to an icon rail. Hover an icon for its label; parents with pages open them as a menu.

Dashboard

Revenue

$48,210

Orders

1,204

Returns

2.1%

Press Cmd or Ctrl and B while the pointer is over this frame to toggle the sidebar. Below 768px the sidebar becomes a sheet.

icon only, starts collapsed

Dashboard

Revenue

$48,210

Orders

1,204

Returns

2.1%

Press Cmd or Ctrl and B while the pointer is over this frame to toggle the sidebar. Below 768px the sidebar becomes a sheet.

inset

The page sits on a raised, rounded surface.

New run

Revenue

$48,210

Orders

1,204

Returns

2.1%

Press Cmd or Ctrl and B while the pointer is over this frame to toggle the sidebar. Below 768px the sidebar becomes a sheet.

floating

The sidebar floats with a ring and a shadow.

New run

Revenue

$48,210

Orders

1,204

Returns

2.1%

Press Cmd or Ctrl and B while the pointer is over this frame to toggle the sidebar. Below 768px the sidebar becomes a sheet.

avatar and user menu

Open the account menu at the bottom: Account, Billing, Notifications, Sign out.

Runs

Revenue

$48,210

Orders

1,204

Returns

2.1%

Press Cmd or Ctrl and B while the pointer is over this frame to toggle the sidebar. Below 768px the sidebar becomes a sheet.

right side

side end.

Introduction

Revenue

$48,210

Orders

1,204

Returns

2.1%

Press Cmd or Ctrl and B while the pointer is over this frame to toggle the sidebar. Below 768px the sidebar becomes a sheet.

keyboard shortcut

This one answers to Cmd or Ctrl and E, not B.

New run

Revenue

$48,210

Orders

1,204

Returns

2.1%

Press Cmd or Ctrl and E while the pointer is over this frame to toggle the sidebar. Below 768px the sidebar becomes a sheet.

state

Collapse the sidebar, then reload the page. It stays collapsed.

persisted

localStorage key: kc:app-sidebar:demo

New run

Revenue

$48,210

Orders

1,204

Returns

2.1%

Press Cmd or Ctrl and B while the pointer is over this frame to toggle the sidebar. Below 768px the sidebar becomes a sheet.

motion

The prop adds to prefers-reduced-motion, which is always honored.

reduced motion

Introduction

Revenue

$48,210

Orders

1,204

Returns

2.1%

Press Cmd or Ctrl and B while the pointer is over this frame to toggle the sidebar. Below 768px the sidebar becomes a sheet.