page scroll

The page scrolls and the navbar sticks. Breadcrumbs follow the sidebar.

Reports

Revenue
$48,210Up +4.2%
Orders
1,204Up +1.8%
Average order
$40Down −0.6%
Returns
2.1%Down −0.3%
  • Order 11000
  • Order 21037
  • Order 31074
  • Order 41111
  • Order 51148
  • Order 61185
  • Order 71222
  • Order 81259
  • Order 91296
  • Order 101333
  • Order 111370
  • Order 121407
  • Order 131444
  • Order 141481

content scroll

The frame stays put and only the main area scrolls.

Dashboard

Revenue
$48,210Up +4.2%
Orders
1,204Up +1.8%
Average order
$40Down −0.6%
Returns
2.1%Down −0.3%
  • Order 11000
  • Order 21037
  • Order 31074
  • Order 41111
  • Order 51148
  • Order 61185
  • Order 71222
  • Order 81259
  • Order 91296
  • Order 101333
  • Order 111370
  • Order 121407
  • Order 131444
  • Order 141481

sidebar variants and collapse modes

Offcanvas slides away, icon leaves a rail, none stays put. Inset and floating change the surface.

Dashboard

Revenue
$48,210Up +4.2%
Orders
1,204Up +1.8%
Average order
$40Down −0.6%
Returns
2.1%Down −0.3%
  • Order 11000
  • Order 21037
  • Order 31074
  • Order 41111
  • Order 51148
  • Order 61185
  • Order 71222
  • Order 81259
  • Order 91296
  • Order 101333
  • Order 111370
  • Order 121407
  • Order 131444
  • Order 141481

aside with shortcut

Cmd or Ctrl and I toggles the details panel while the pointer is over this frame. Below 768px it opens as a sheet.

Dashboard

Revenue
$48,210Up +4.2%
Orders
1,204Up +1.8%
Average order
$40Down −0.6%
Returns
2.1%Down −0.3%
  • Order 11000
  • Order 21037
  • Order 31074
  • Order 41111
  • Order 51148
  • Order 61185
  • Order 71222
  • Order 81259

toolbar and footer

Updated just now

Dashboard

Revenue
$48,210Up +4.2%
Orders
1,204Up +1.8%
Average order
$40Down −0.6%
Returns
2.1%Down −0.3%
  • Order 11000
  • Order 21037
  • Order 31074
  • Order 41111
  • Order 51148
  • Order 61185
  • Order 71222
  • Order 81259
  • Order 91296
  • Order 101333
Northwind ops console. Data is sample data.

resizable sidebar and aside

Drag the handles, or use the keyboard on a focused handle. Dragging the sidebar narrow collapses it; a tab reopens it.

Dashboard

Revenue
$48,210Up +4.2%
Orders
1,204Up +1.8%
Average order
$40Down −0.6%
Returns
2.1%Down −0.3%
  • Order 11000
  • Order 21037
  • Order 31074
  • Order 41111
  • Order 51148
  • Order 61185
  • Order 71222
  • Order 81259

Order details

Order
#4102
Customer
Cleo Marsh
Total
$128.40
Carrier
Parcelway

state

sidebarOpen: true, asideOpen: true

controlled state

The sidebar trigger, rail, shortcuts and the buttons above all write to the same state.

Dashboard

Revenue
$48,210Up +4.2%
Orders
1,204Up +1.8%
Average order
$40Down −0.6%
Returns
2.1%Down −0.3%
  • Order 11000
  • Order 21037
  • Order 31074
  • Order 41111
  • Order 51148
  • Order 61185
  • Order 71222
  • Order 81259
  • Order 91296
  • Order 101333
  • Order 111370
  • Order 121407
  • Order 131444
  • Order 141481
Toggle the sidebar and the aside, then reload.

persisted state

localStorage keys under kc:app-layout:demo

Dashboard

Revenue
$48,210Up +4.2%
Orders
1,204Up +1.8%
Average order
$40Down −0.6%
Returns
2.1%Down −0.3%
  • Order 11000
  • Order 21037
  • Order 31074
  • Order 41111
  • Order 51148
  • Order 61185
  • Order 71222
  • Order 81259
  • Order 91296
  • Order 101333
  • Order 111370
  • Order 121407
  • Order 131444
  • Order 141481

complex

Resizable sidebar and aside, toolbar, breadcrumbs, a table that selects into the aside, and a footer.