Sidebar

The Sidebar component provides a responsive, collapsible navigation interface that can be used for application navigation. It supports various states including expanded, collapsed, and mobile views with offcanvas functionality.

Usage

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

// Basic usage with all main components
const SidebarExample = () => {
  return (
    <Sidebar.Provider>
      <Sidebar.Root className="h-screen">
        <Sidebar.Header>
          {/* Your logo and search component */}
          <SidebarSearch logo={<YourLogo />} />
        </Sidebar.Header>

        <Sidebar.Content>
          {/* Main navigation items */}
          <Sidebar.Group>
            <Sidebar.GroupContent>
              <Sidebar.Menu>
                <Sidebar.MenuItem>
                  <Sidebar.MenuButton>
                    <Sidebar.MenuItemText
                      text="Dashboard"
                      icon={<Icon name="dashboard" size={14} />}
                    />
                  </Sidebar.MenuButton>
                </Sidebar.MenuItem>
                <Sidebar.MenuItem>
                  <Sidebar.MenuButton>
                    <Sidebar.MenuItemText
                      text="Projects"
                      icon={<Icon name="folder" size={14} />}
                    />
                  </Sidebar.MenuButton>
                </Sidebar.MenuItem>
              </Sidebar.Menu>
            </Sidebar.GroupContent>
          </Sidebar.Group>

          {/* Grouped navigation items */}
          <Sidebar.Group title="Recent">
            <Sidebar.GroupLabel>Recent</Sidebar.GroupLabel>
            <Sidebar.GroupContent>
              <Sidebar.Menu>
                <Sidebar.MenuItem>
                  <Sidebar.MenuButton>
                    <Sidebar.MenuItemText
                      text="Project Alpha"
                      icon={<Icon name="folder" size={14} />}
                    />
                  </Sidebar.MenuButton>
                </Sidebar.MenuItem>
              </Sidebar.Menu>
            </Sidebar.GroupContent>
          </Sidebar.Group>
        </Sidebar.Content>

        <Sidebar.Footer>
          {/* User profile or other footer content */}
          <UserProfile />
        </Sidebar.Footer>

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

      {/* Main content area */}
      <div className="flex-1">
        <div className="border-b flex items-center">
          <Sidebar.Trigger />
          <Sidebar.Separator orientation="vertical" />
          {/* Breadcrumb or other header content */}
        </div>
        <main>
          {/* Your main application content */}
        </main>
      </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.GroupLabel />
        <Sidebar.GroupContent>
          <Sidebar.Menu>
            <Sidebar.MenuItem>
              <Sidebar.MenuButton>
                <Sidebar.MenuItemText />
              </Sidebar.MenuButton>
            </Sidebar.MenuItem>
          </Sidebar.Menu>
        </Sidebar.GroupContent>
      </Sidebar.Group>
    </Sidebar.Content>
    <Sidebar.Footer />
    <Sidebar.Rail />
  </Sidebar.Root>
  <Sidebar.Trigger />
  <Sidebar.Separator />
</Sidebar.Provider>

API Reference

Sidebar.Provider

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

Sidebar.Root

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
side	false		'left' | 'right'
variant	false		'sidebar' | 'floating' | 'inset'
collapsible	false		'offcanvas' | 'icon' | 'none'

Sidebar.Header

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Sidebar.Content

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Sidebar.Group

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

Sidebar.GroupLabel

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
asChild	false		boolean

Sidebar.GroupAction

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
asChild	false		boolean

Sidebar.GroupContent

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Sidebar.Menu

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Sidebar.MenuItem

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Sidebar.MenuButton

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
onClick	false		() => void
active	false		boolean
asChild	false		boolean
isActive	false		boolean
tooltip	false		string | ComponentProps<typeof Tooltip.Content>
variant	false		'default' | 'outline'
size	false		'default' | 'sm' | 'lg'

Sidebar.MenuItemText

Prop	Required	Default	Type
text	true		string
icon	false		ReactElement<SVGSVGElement>
className	false		string
active	false		boolean

Sidebar.MenuAction

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
asChild	false		boolean
showOnHover	false		boolean

Sidebar.MenuBadge

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Sidebar.MenuSkeleton

Prop	Required	Default	Type
className	false		string
showIcon	false		boolean

Sidebar.MenuSub

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Sidebar.MenuSubItem

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Sidebar.MenuSubButton

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
asChild	false		boolean
size	false		'sm' | 'md'
isActive	false		boolean

Sidebar.Footer

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Sidebar.Rail

Prop	Required	Default	Type
className	false		string

Sidebar.Trigger

Prop	Required	Default	Type
className	false		string
onClick	false		() => void

Sidebar.Separator

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

Sidebar.Input

Prop	Required	Default	Type
className	false		string
placeholder	false		string

Sidebar.Inset

Prop	Required	Default	Type
children	true		ReactNode
className	false		string