Navigation
Dashboard Sidebar
A collapsible dashboard sidebar with icon navigation, grouped sections, and responsive behavior.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyintermediate
English Prompt
Create a collapsible dashboard sidebar. Expanded state shows icons + labels; collapsed state shows only icons. Include 8 navigation items grouped into sections (Main, Analytics, Settings), a collapse toggle at the bottom, and a user avatar at the top. Use shadcn/ui Tooltip for collapsed icons and Tailwind CSS. Persist collapsed state in localStorage and make it responsive.
Chinese Prompt
创建一个可折叠的仪表盘侧边栏。展开状态显示图标+标签；折叠状态只显示图标。包含 8 个按分组排列的导航项（Main、Analytics、Settings），底部折叠切换按钮，顶部用户头像。使用 shadcn/ui Tooltip 显示折叠状态下的图标标签，以及 Tailwind CSS。将折叠状态持久化到 localStorage 并使其响应式。
Overview
A dashboard sidebar that saves space while keeping navigation accessible. Supports collapsible states and responsive layout.
Features
- Collapsible icon-only / icon+label modes
- Grouped navigation sections
- User avatar header
- Tooltip labels in collapsed mode
- localStorage persistence
- Responsive behavior
Usage
Copy the prompt into v0 or Cursor. Adjust the navigation groups and icons for your app.
Customization
Modify the prompt to:
- Add nested sub-menus
- Add badge counts to nav items
- Support keyboard shortcuts
- Change color theme (dark/light)