Component · Navigation · 12
Sidebar
Sidebar = a fixed-width navigation column with a marked current item and an optional collapse state.
What is a Sidebar?
A sidebar is a vertical map of the product. Give width, current-item treatment, and collapse on tablet.
Variants
Tap a property to highlight it in the preview.
- A sidebar that stays in place and does not collapse.
- A sidebar that can shrink to icons or hide entirely.
- The horizontal size of the surface (modal max-width, sidebar width).
- The active nav entry, marked with a distinct background or accent.
- Small glyphs that label or decorate nav entries.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- How the control reacts on pointer-over: lift, tint, or border change. Name it so the model does not guess.
Anatomy
These are the parts to name in your prompt.
- 01 Brand
- 02 Nav items
- 03 Current item
When to use
- Dashboards and admin tools with 5–12 sections
- Products where navigation is always visible
- App shells with a collapsible workspace rail
Avoid when
- Content-first marketing pages — use a Navbar
- Fewer than 4 destinations
- Very small screens without a drawer plan
See also
Create a product sidebar.
LAYOUT
- 180px fixed left rail
STYLE
- current item with 2px accent bar
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui