Sidebar

The Sidebar component provides a responsive, collapsible navigation interface for application navigation. It supports expanded and collapsed states on desktop, transforms into an off-canvas menu on mobile devices, and includes features like nested submenus, badges, tooltips, and customizable actions.

It is composed of several subcomponents such as Sidebar.Provider, Sidebar.Root, Sidebar.Trigger, Sidebar.Content, Sidebar.Header, Sidebar.Footer, Sidebar.Group, Sidebar.Item, Sidebar.MenuSubItem, Sidebar.Rail, and more to offer a structured and customizable interface.

Usage

import { Sidebar } from '@harnessio/ui/components'

// Basic usage with navigation
const SidebarExample = () => {
  return (
    <Sidebar.Provider>
      <Sidebar.Root>
        <Sidebar.Header>
          {/* Logo or branding */}
          <div className="p-4">
            <YourLogo />
          </div>
        </Sidebar.Header>

        <Sidebar.Content>
          {/* Main navigation items */}
          <Sidebar.Group>
            <Sidebar.Item
              icon="dashboard"
              title="Dashboard"
              to="/dashboard"
            />
            <Sidebar.Item
              title="Projects"
              badge="5"
              to="/projects"
            />
          </Sidebar.Group>

          {/* Grouped navigation with label */}
          <Sidebar.Group label="Settings">
            <Sidebar.Item
              icon="settings"
              title="General Settings"
              to="/settings/general"
            />
            <Sidebar.Item
              icon="users"
              title="Team Members"
              to="/settings/team"
            />
          </Sidebar.Group>
        </Sidebar.Content>

        <Sidebar.Footer>
          {/* User profile */}
          <Sidebar.Item
            src={user.avatar}
            avatarFallback={user.initials}
            title={user.name}
            description={user.email}
            dropdownMenuContent={
              <>
                <DropdownMenu.Item>Profile</DropdownMenu.Item>
                <DropdownMenu.Item>Logout</DropdownMenu.Item>
              </>
            }
          />
          <Sidebar.ToggleMenuButton />
        </Sidebar.Footer>

        <Sidebar.Rail />
      </Sidebar.Root>

      {/* Main content area */}
      <div className="flex-1">
        <header className="border-b">
          <Sidebar.Trigger />
        </header>
        <Sidebar.Inset>
          {/* Your main application content */}
        </Sidebar.Inset>
      </div>
    </Sidebar.Provider>
  )
}

Anatomy

The Sidebar component is composed of several nested components that work together to create a complete navigation interface:

<Sidebar.Provider>
  <Sidebar.Root>
    <Sidebar.Header />
    <Sidebar.Content>
      <Sidebar.Group>
        <Sidebar.Item>
          <Sidebar.MenuSubItem />
        </Sidebar.Item>
      </Sidebar.Group>
      <Sidebar.Separator />
    </Sidebar.Content>
    <Sidebar.Footer />
    <Sidebar.Rail />
  </Sidebar.Root>
  <Sidebar.Trigger />
  <Sidebar.Inset />
</Sidebar.Provider>

Sidebar.Provider

The provider component that manages sidebar state and context. Must wrap all other sidebar components.

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
defaultOpen	false		boolean
open	false		boolean
onOpenChange	false		(open: boolean) => void

Sidebar.Root

The main container for the sidebar that handles responsive behavior and animations.

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
side	false		'left' | 'right'

Sidebar.Trigger

A button that toggles the sidebar open/closed state. Typically used in the main content header on mobile.

Prop	Required	Default	Type
className	false		string
onClick	false		(event: MouseEvent<HTMLButtonElement>) => void

Sidebar.Rail

An interactive rail on the edge of the sidebar that allows toggling via click. Only visible on desktop.

Prop	Required	Default	Type
className	false		string

Sidebar.Inset

A container for main content that adjusts its padding based on sidebar state.

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Sidebar.Header

Container for header content like logos or search components.

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Sidebar.Content

Scrollable container for the main navigation items.

Prop	Required	Default	Type
children	true		ReactNode

Sidebar.Footer

Container for footer content like user profiles or settings.

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Sidebar.Group

Groups related navigation items with an optional label.

Prop	Required	Default	Type
children	true		ReactNode
label	false		string
className	false		string

Sidebar.Item

The main navigation item component with support for various configurations.

Prop	Required	Default	Type
title	true		string
description	false		string
icon	false		string
logo	false		string
src	false		string
avatarFallback	false		string
badge	false		string | { content: ReactNode; variant?: 'outline' | 'status'; theme?: StatusBadgeTheme; className?: string }
tooltip	false		ReactNode
actionMenuItems	false		DropdownMenuItemProps[]
dropdownMenuContent	false		ReactNode
withRightIndicator	false		boolean
children	false		ReactNode
to	false		string
onClick	false		(event: MouseEvent<HTMLButtonElement>) => void
disabled	false		boolean
className	false		string

Sidebar.MenuSubItem

Sub-navigation items that appear within an expanded Sidebar.Item.

Prop	Required	Default	Type
title	true		string
to	true		string
className	false		string

Sidebar.Separator

A visual separator between groups or items.

Prop	Required	Default	Type
orientation	false		'horizontal' | 'vertical'
className	false		string

Sidebar.MenuSkeleton

Loading skeleton for sidebar items.

Prop	Required	Default	Type
hideIcon	false		boolean
className	false		string

Sidebar.ToggleMenuButton

A specialized button for toggling the sidebar collapsed/expanded state.

Prop	Required	Default	Type
text	false		string
onClick	false		(event: MouseEvent<HTMLButtonElement>) => void

Keyboard Shortcuts

• ⌘B / Ctrl+B - Toggle sidebar expanded/collapsed state

Accessibility

The Sidebar component includes several accessibility features:

• Keyboard navigation support with proper focus management
• ARIA labels and roles for screen readers
• Tooltips for collapsed items
• Semantic HTML structure
• Proper contrast ratios for all interactive elements

This updated documentation:
1. Provides a comprehensive introduction explaining what the component does
2. Lists all the actual subcomponents based on the code
3. Includes realistic examples using the correct API
4. Shows the proper anatomy structure
5. Demonstrates different features with live examples
6. Provides complete API reference for all components with their actual props
7. Includes keyboard shortcuts and accessibility information

The documentation now matches the structure and comprehensiveness of the Drawer documentation while accurately reflecting the actual Sidebar implementation.