Component Card

Sidebar

Support deep navigation without crowding top-level controls.

Sidebar anatomy

When to Use

Multi-section applications with persistent navigation needs.
Settings and admin areas with many sibling pages.
Desktop-first workflows that benefit from always-visible context.

When NOT to Use

Group related nav items, highlight active route, and keep labels concise.

For simple pages with only two or three views, tabs are usually lighter.

Variants

Collapsible

Icon + label

Mini rail

Confused?

Use sidebar for page-level navigation and Breadcrumbs for path context within that hierarchy.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Design an app sidebar with grouped navigation, active state, and clear visual separation from main content.

Pencil Prompt

Create a left sidebar containing grouped nav items and one active item, then place a content panel beside it.

Next Lesson

Tabs