Skip to content
github

Sidebar

The Sidebar component is a responsive, collapsible navigation surface for an application. It expands and collapses on desktop, slides in as an off-canvas panel on mobile, and supports nested submenus, badges, tooltips, per-item actions, and a footer profile menu.

It’s a compound component with parts like Sidebar.Provider, Sidebar.Root, Sidebar.Trigger, Sidebar.Content, Sidebar.Header, Sidebar.Footer, Sidebar.Group, Sidebar.Item, Sidebar.MenuSubItem, Sidebar.Popover, Sidebar.Rail, Sidebar.Inset, and more.

Installation

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-cn-md">
            <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>
  )
}