Component Prompts

Sidebar Navigation with Icons & Collapse

A full-height sidebar navigation with icon + label links, active state, nested submenu, and a collapse toggle.

Open in v0
Prompt
Create a full-height sidebar navigation component with:
- App logo at the top
- Navigation sections with headers (e.g. "Main", "Settings")
- 6 nav items each with a lucide-react icon and label
- Active item highlighted with background color
- One item with a collapsible submenu (3 sub-items)
- A collapse toggle button at the bottom that hides labels and shows only icons
- User avatar and name at the very bottom with a logout button
- Use shadcn/ui, Tailwind CSS, dark mode support
Share:Share on X
Seed Contributor avatar
Seed Contributor
@seed
0 copies · 0 upvotes

More Navigation Prompts

A clean responsive navbar with logo on the left, nav links in the center, and a CTA button on the right. Collapses to a hamburger menu on mobile.

A marketing-style mega menu that opens on hover with categorized links and a featured content panel.