Sidebar

v2.1.2

Documentation Under Review

The Sidebar component provides a flexible and accessible navigation solution for product applications. It features collapsible behavior, keyboard shortcuts, and extensive customization options for headers, content, and footers.

Installation

Install the Sidebar component from the Catalyst component library:

npm install '@pmi/catalyst-sidebar'

Examples

Header With Logo

Complete sidebar with PMI logo header, navigation groups with submenus, menu actions, badges, and user footer. The logo adapts between light and dark themes.

Header With Logo Custom

Complete sidebar with custom neutral styling. Features aqua hover states, neutral color palette, and all the same navigation structure as the default example.

Header With Logo Text

Sidebar with PMI logo mark and text label in the header.

Header With Icon Text

Sidebar with custom icon and text label in the header.

Header With Icon Text Custom

Sidebar with custom neutral styling, aqua hover states, and icon with text label in the header.

Header With Avatar Text

Sidebar with user avatar and text in the header.

For the Tree Example Infinity demonstration with hierarchical navigation, see the Content documentation page.

API Reference

SidebarProvider

Wrapper component that provides sidebar context to all child components.

SidebarRoot

The main sidebar container with collapsible behavior.

SidebarHeader

Header section of the sidebar, typically contains branding or user info.

SidebarContent

Main content area of the sidebar, contains navigation groups and menus.

SidebarFooter

Footer section of the sidebar, typically contains user actions or info.

SidebarGroup

Groups related menu items together with an optional label.

SidebarGroupLabel

Label for a sidebar group.

SidebarMenu

Container for menu items.

SidebarMenuItem

Individual menu item, typically wraps a SidebarMenuButton.

SidebarMenuButton

Clickable button for menu items.

SidebarMenuSub

Container for submenu items (nested navigation).

SidebarMenuSubItem

SidebarMenuSubButton

Clickable button for submenu items.

SidebarTrigger

Button to toggle the sidebar open/closed state.

SidebarRail

Visual affordance at the edge of the sidebar for resizing/collapsing.

Keyboard Navigation

The Sidebar component supports comprehensive keyboard navigation:

• Toggle Shortcut: Cmd+B (Mac) or Ctrl+B (Windows) - Toggle sidebar open/closed
• Custom Hotkey: Configure via hotkey prop on SidebarRoot
• Tab Navigation: Navigate through menu items with Tab key
• Enter/Space: Activate menu items and collapsible sections
• Arrow Keys: Navigate between menu items and expand/collapse sections

Accessibility

The Sidebar component follows WCAG 2.1 AA accessibility standards:

• Semantic HTML: Uses <aside> element with proper ARIA attributes
• Keyboard Navigation: Full keyboard support for all interactive elements
• Screen Reader Support:
  • Proper ARIA labels for sidebar state
  • Collapsible sections announce expanded/collapsed state
  • Active menu items clearly identified
• Focus Management: Visible focus indicators on all interactive elements
• Color Contrast: Sufficient contrast for all text and interactive elements

Related Components

• Link - Used for navigation items
• Button - Used for toggle trigger
• Avatar - User information display
• Logos - PMI and Infinity branding
• Icons - Navigation icons
• ScrollArea - Scrollable content container

Best Practices

1. Always wrap with SidebarProvider: The provider manages shared state for all sidebar components
2. Include SidebarRail: Provides visual affordance for collapse/expand interaction
3. Use semantic structure: Header → Content → Footer for consistent layout
4. Provide keyboard shortcuts: Enable productivity with customizable hotkeys
5. Handle active states: Highlight the current page/section in navigation
6. Test collapsed state: Ensure all functionality works in both expanded and icon-only modes
7. Consider mobile: Use collapsible="offcanvas" for mobile layouts
8. Optimize for dark mode: Test both light and dark themes
9. Group related items: Use SidebarGroup to organize navigation logically
10. Add tooltips in collapsed mode: Help users identify icons when sidebar is collapsed