Sidebar Content

v2.1.2

Documentation Under Review

The Sidebar Content component houses the main navigation structure of the sidebar, including groups, menus, submenus, actions, and badges.

Installation

The Sidebar Content is included in the Sidebar package:

npm install '@pmi/catalyst-sidebar'

Examples

Default

Sidebar content with navigation groups, expandable submenus, menu actions, and badges.

Custom

Sidebar content with custom neutral styling, aqua hover states, and all navigation features.

API Reference

SidebarContent Props

SidebarGroup Props

SidebarGroupContent Props

SidebarGroupAction Props

SidebarMenu Props

SidebarMenuButton Props

SidebarMenuAction Props

SidebarMenuBadge Props

Usage Patterns

Navigation Groups

Group related navigation items together with labels:

<SidebarGroup>
  <SidebarGroupLabel asChild><h5>Section Title</h5></SidebarGroupLabel>
  <SidebarGroupContent>
    <SidebarMenu title="Section Title">
      {/* Menu items */}
    </SidebarMenu>
  </SidebarGroupContent>
</SidebarGroup>

Expandable Submenus

Create collapsible navigation with submenus:

<SidebarMenuItem>
  <SidebarMenuButton
    aria-haspopup={true}
    onClick={() => setOpen(!open)}
    data-open={open}
  >
    <TokenIcon size="xs" className="flex-shrink-0" />
    <div className="flex flex-grow items-center justify-between...">
      Menu Item
      <TextlinkChevronIcon
        size="sm"
        className="...group-data-[open=true]/menu-button:rotate-90"
      />
    </div>
  </SidebarMenuButton>
  {open && (
    <SidebarMenuSub>
      {/* Submenu items */}
    </SidebarMenuSub>
  )}
</SidebarMenuItem>

Menu Actions

Add contextual actions to menu items:

<SidebarMenuItem>
  <SidebarMenuButton asChild>
    <Link href="#">Item</Link>
  </SidebarMenuButton>
  <SidebarMenuAction>
    <MoreIcon size="xs" />
    <span className="sr-only">Actions</span>
  </SidebarMenuAction>
</SidebarMenuItem>

Active States

Highlight the current/active menu item:

<SidebarMenuButton asChild isActive>
  <Link href="#">Current Page</Link>
</SidebarMenuButton>

Badges

Display counts or notifications on menu items:

<SidebarMenuSubItem>
  <SidebarMenuSubButton asChild>
    <Link href="#">Inbox</Link>
  </SidebarMenuSubButton>
  <SidebarMenuBadge>7</SidebarMenuBadge>
</SidebarMenuSubItem>

Styling

Default Theme

• Text colors: Inherits from parent
• Group labels: Default text color
• Menu item hover: hover:bg-pmi-violet-50 dark:hover:bg-pmi-violet-700
• Active item: Default active styles
• Badges: Default badge colors
• Actions: Default action styles

Custom/Neutral Theme

• Content: text-neutral-600 dark:text-neutral-50
• Group labels: text-neutral-600 dark:text-neutral-200
• Menu items: All have ITEM_BADGE_MARK_COLORS (after:bg-pmi-aqua-500)
• Menu buttons: LINK_STYLES (aqua hover states)
• Active items: LINK_STYLES_ACTIVE (bg-pmi-aqua-100 dark:bg-pmi-aqua-700)
• Actions: ACTION_COLORS (aqua hover/focus)
• Badges: BADGE_COLORS (bg-pmi-aqua-500, text-neutral-50)
• Submenu borders: border-neutral-400 dark:border-neutral-500
• Focus states: aqua-500 ring and border

Accessibility

• Menu titles: Always provide title prop for screen readers
• Group labels: Use semantic heading elements (<h5>)
• Expandable items: Include aria-haspopup, aria-expanded, and data-open attributes
• Actions: Provide screen reader text with <span className="sr-only">
• Active states: Clearly marked with isActive prop
• Keyboard navigation: All items fully keyboard accessible

Related Components

• Sidebar - Main sidebar container
• Sidebar Header - Header section
• Sidebar Footer - Footer section
• Link - Navigation links
• ScrollArea - Scrollable container
• Icons - Navigation icons