PenTool UIالعربيةBrowse the library

Sidebars · Navigation

Sidebars in Navigation: 14 designs — Sidebar with Live Badges · Collapsible Sidebar · Sidebar with Command Palette · Mobile Drawer

All Navigation designs

Designs

RTL VerifiedLTR Verified Navigation

Sidebar with Live Badges

Counters that change and announce themselves to screen readers

Intermediate
Code Prompt
RTL VerifiedLTR Verified Navigation

Collapsible Sidebar

Folds into an icon rail and remembers your choice

Intermediate
Code Prompt
RTL VerifiedLTR Verified Navigation

Sidebar with Command Palette

Ctrl+K opens a search that jumps anywhere by keyboard alone

Advanced
Code Prompt
RTL VerifiedLTR Verified Navigation

Mobile Drawer

Slides from the start edge and traps focus inside

Advanced
Code Prompt
RTL VerifiedLTR Verified Navigation

Grouped Sidebar

Group headings separate sections without collapsing

Beginner
Code Prompt
RTL VerifiedLTR Verified Navigation

Icon Rail with Tooltips

As narrow as it gets — the label appears on hover and focus

Intermediate
Code Prompt
RTL VerifiedLTR Verified Navigation

Nested Sidebar

Groups that expand and collapse — one open at a time

Advanced
Code Prompt
RTL VerifiedLTR Verified Navigation

Sidebar with Pinned Items

Pin what you use daily to the top — and it stays pinned

Advanced
Code Prompt
RTL VerifiedLTR Verified Navigation

Sidebar with User Menu

A menu that closes on outside click and on Escape

Intermediate
Code Prompt
RTL VerifiedLTR Verified Navigation

Sidebar with Progress Meters

Each section carries a computed meter, announced to screen readers

Intermediate
Code Prompt
RTL VerifiedLTR Verified Navigation

Searchable Sidebar

Arabic-normalized search filters items instantly

Advanced
Code Prompt
RTL VerifiedLTR Verified Navigation

Sidebar Shell

Three regions and two states — the content slot is yours to fill

Advanced
Code Prompt
RTL VerifiedLTR Verified Navigation

Split Rail with Context Panel

An icon column that swaps the contents of the panel beside it

Advanced
Code Prompt
RTL VerifiedLTR Verified Navigation

Sidebar with Workspace Switcher

Switching the client swaps the whole navigation

Advanced
Code Prompt