Components
Sidebar
A composable, themeable, and customizable sidebar component that provides navigation and organizational structure for applications.
A sidebar is a navigation component that provides easy access to different sections of an application. It can be collapsible, contain nested menu items, and adapt to different screen sizes. The sidebar is central to many applications and provides users with a consistent way to navigate through content.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use sidebars for primary navigation, organizing content hierarchically, and providing quick access to different application sections. |
| Content | Use clear labels, meaningful icons, and logical grouping to help users understand the navigation structure. |
| Behavior | Provide smooth transitions, responsive behavior, and intuitive collapse/expand functionality. |
| States | Support active, hover, focus, and disabled states with clear visual feedback. |
| Feedback | Indicate current location and provide visual feedback for user interactions. |
| Examples | Application navigation, dashboard menus, content organization, user account sections, and settings panels. |
Best Practices
- Clear Navigation Hierarchy: Organize menu items in logical groups with appropriate nesting and clear visual hierarchy.
- Consistent Styling: Use consistent spacing, typography, and visual treatment across all sidebar elements.
- Responsive Design: Ensure the sidebar works well on different screen sizes, with appropriate mobile behavior.
- Accessibility: Provide proper keyboard navigation, screen reader support, and ARIA attributes.
- Performance: Use appropriate loading states and optimize for smooth animations and transitions.
Do’s and Don’ts
Do
- Use clear, descriptive labels for navigation items.
- Provide visual feedback for active/current states.
- Group related items logically together.
- Include proper accessibility attributes.
- Use consistent iconography and styling.
Don't
- Overcrowd the sidebar with too many menu items.
- Use unclear or ambiguous labels.
- Ignore mobile responsiveness.
- Forget to indicate the current page/section.
- Make the sidebar too narrow or too wide.
Additional Guidance
- Accessibility: Sidebars must support keyboard navigation, provide proper ARIA labels, and work with screen readers.
-
Psychological Impact:
- Spatial Awareness: A well-organized sidebar helps users understand where they are in the application.
- Cognitive Load: Clear navigation reduces mental effort by providing predictable organization.
- Control: Users feel more in control when they can easily navigate between sections.