Collapsible sidebar layout

Use collapsible side navigation to organize admin tools and leave room for the main content.

Live preview Try the effect

WorkspaceOverview · Projects · Team

DashboardToday, Tuesday

Total visits12,480↗ 12.8%

Active users1,286↗ 8.2%

Complete tasks86↗ 16%

Recent projects Status

Website redesignIn progress

Order managementCompleted

Data visualizationIn progress

Website redesignCompleted

Order managementIn progress

Data visualizationCompleted

Website redesignIn progress

Order managementCompleted

Data visualizationIn progress

Website redesignCompleted

Order managementIn progress

Data visualizationCompleted

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Use collapsible side navigation to organize admin tools and leave room for the main content. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Multi-section dashboards and long management lists.

Related concepts

Unlike top navigation, a sidebar supports deeper navigation. Collapsing it must preserve the selected destination.

Describe this effect

Output language

Use a collapsible sidebar with a fixed header and an independently scrolling main content area. Set the sidebar width to 240px, expanded by default.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.