Sidebar Header

v2.1.2

Documentation Under Review

The Sidebar Header component displays branding, user information, or navigation context at the top of a sidebar. It automatically handles transitions between expanded and icon-only modes.

Installation

The Sidebar Header is included in the Sidebar package:

npm install '@pmi/catalyst-sidebar'

Examples

With Logo

Header with PMI logo that transitions to icon-only when collapsed. Shows theme-aware logos that adapt to light/dark mode.

With Logo Custom

Header with custom neutral styling and PMI branding. Features aqua hover states and neutral color palette.

With Logo Text

Header with PMI logo mark, title, and subtitle text.

With Icon Text

Header with custom icon and text.

With Icon Text Custom

Custom styled header with neutral colors and aqua hover states.

With Avatar Text

Header with user avatar and information.

API Reference

SidebarHeader Props

Usage Patterns

Transitioning Text

When using text in the header that should collapse with the sidebar, use the following pattern:

<div className="text-sm transition-[font-size] duration-200 ease-linear group-data-[collapsible=icon]:text-[0px] group-data-[collapsible=icon]:leading-none">
  <div className="font-medium whitespace-nowrap -mb-1">
    Title
  </div>
  <div className="font-normal text-pmi-off-black-600 dark:text-pmi-off-black-200">
    Subtitle
  </div>
</div>

Theme-Aware Logos

For logos that should adapt to light/dark mode, use conditional rendering with CSS classes:

<PMIHorizontalColorInverse color="original" size="full" className="w-auto !hidden dark:!block" />
<PMIHorizontalColor color="original" size="full" className="w-auto dark:!hidden" />

Collapsible Actions

Icons and buttons in the header should hide when the sidebar is in icon-only mode:

<div className="flex gap-0.5 group-data-[collapsible=icon]:hidden">
  <Button ... />
  <Button ... />
</div>

Accessibility

• Always provide aria-label attributes for logo links
• Use descriptive aria-label values for action buttons
• Ensure sufficient color contrast for all text elements
• Mark decorative images with aria-hidden

Related Components

• Sidebar - Main sidebar container
• Sidebar Content - Content area with navigation
• Sidebar Footer - Footer section
• Link - Navigation links
• Avatar - User avatars
• Button - Action buttons