Sidebar

Use Sidebars in complex applications with many navigation options: admin panels, dashboards, project management tools, or multi-section apps. They provide persistent, organized access to features without cluttering the top navigation.

Yes, especially on desktop! Collapsible Sidebars give users control over screen space. Show icons only when collapsed (with tooltips), full labels when expanded. This respects users who want maximum content area while maintaining access to navigation.

Group by feature area or workflow, not alphabetically. Put most-used items at top, administrative items at bottom. Use separators between groups, section headings for clarity. Logical organization helps users build mental models of your app structure.

On mobile, Sidebars typically become overlay drawers or bottom sheets—permanent Sidebars take too much space. Show a hamburger menu that opens Sidebar as a Sheet. This adapts desktop navigation patterns for mobile constraints.

Yes! Badges show counts (notifications, tasks) or status (beta, new). Use sparingly—too many badges compete for attention. Reserve for actionable items needing user attention, like unread messages or pending approvals.

Yes, this Figma Sidebar component matches the shadcn/ui implementation, ensuring your navigation sidebars work consistently from design to production with proper collapsible behavior and theming.