Layout

Sidebar

Navigation sidebar with collapsible support, sections, and items with icons and badges.

Overview

The Sidebar component provides a vertical navigation panel typically placed on the left side of the application. It supports collapsible mode (icon-only), sections for grouping items, and items with icons, labels, and badges.

Components

The Sidebar system consists of three components:

  • Sidebar - The main container with collapse functionality
  • SidebarSection - Groups related items with an optional title
  • SidebarItem - Individual navigation items with icon and label

Props

Sidebar

Prop Type Default Description
collapsed boolean - Controlled collapsed state (icon-only mode)
defaultCollapsed boolean false Default collapsed state (uncontrolled)
onCollapsedChange (collapsed: boolean) => void - Callback when collapsed state changes
width number | string 240 Width when expanded
collapsedWidth number | string 64 Width when collapsed

SidebarSection

Prop Type Default Description
title string - Section title (hidden when sidebar is collapsed)
children ReactNode - Section content (SidebarItem components)

SidebarItem

Prop Type Default Description
icon ReactNode Required Icon to display
label string Required Label text
active boolean false Whether this item is currently active
badge number | string - Badge count or indicator
tooltip string - Tooltip text (shown when collapsed, defaults to label)

Variants

Collapsible Sidebar

The sidebar can be collapsed to icon-only mode. Labels become tooltips on hover. 

const [collapsed, setCollapsed] = useState(false);

<Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>
  <SidebarItem icon={<HomeIcon />} label="Home" />
</Sidebar>

With Sections

Group related items into sections with titles.

 
<Sidebar>
  <SidebarSection title="Main">
    <SidebarItem icon={<HomeIcon />} label="Home" />
    <SidebarItem icon={<UsersIcon />} label="Patients" badge={12} />
  </SidebarSection>
  <SidebarSection title="Settings">
    <SidebarItem icon={<SettingsIcon />} label="Settings" />
  </SidebarSection>
</Sidebar>

Items with Badges

Show counts or status indicators on items.

 
<SidebarItem icon={<InboxIcon />} label="Inbox" badge={5} />
<SidebarItem icon={<UsersIcon />} label="Patients" badge={120} />
<SidebarItem icon={<CalendarIcon />} label="Calendar" badge="New" />

Hooks

useSidebar

Access sidebar state from child components.

import { useSidebar } from '@enara-health/ui-react';

const MyComponent = () => {
  const { collapsed, setCollapsed } = useSidebar();

  return (
    <button onClick={() => setCollapsed(!collapsed)}>
      {collapsed ? 'Expand' : 'Collapse'}
    </button>
  );
};

Accessibility

  • Semantic HTML: Uses <aside> and <nav> elements.
  • ARIA Labels: Items have aria-labels when collapsed for screen readers.
  • Keyboard Navigation: All items are focusable and activatable via keyboard.
  • Tooltips: Labels appear as tooltips when sidebar is collapsed.