📖 Step 3: Design - UI Components & Patterns#75 / 291
Sidebar
Sidebar
📖One-line summary
A fixed vertical menu on the left or right of the screen.
✨Example
Sidebar layout example
Menu
Dashboard
Projects
Team members
Settings
⚡Vibe coding prompt examples
>_
Build a collapsible sidebar. When collapsed, show only icons; when expanded, show menu text. Highlight the current page item.
>_
Build a sidebar for an admin dashboard. Use a 2-level menu structure where clicking a parent menu expands its children.
>_
Add a user profile area at the bottom of the sidebar. Show avatar, name, and email; clicking opens logout and settings.
Try these prompts in your AI coding assistant!