Side navigation

Persistent vertical navigation. Aligned with J&J DS v1.2 (Figma 22479:53263 + 20976:4425/3877). Three modes: expanded (256px, default), compact (224px), and rail (56px, icons only).

Expanded — sections, nested items, count badges

Sections collapse with a chevron. Items can carry a count badge and an external-link marker. The active item uses the inverse (black) fill with white text.

Selected:

studies

Show source

<SideNavigation value={value} onSelect={setValue}>
  <SideNavigationList>
    <SideNavigationSection label="My work">
      <SideNavigationItem value="dashboard" icon={<Icon icon={Home} size="sm" />} label="Dashboard" />
      <SideNavigationItem value="studies" icon={<Icon icon={BookOpen} size="sm" />} label="Studies" count={3} />
      <SideNavigationGroup label="Reports" icon={<Icon icon={FileText} size="sm" />}>
        <SideNavigationItem value="daily" label="Daily" />
        <SideNavigationItem value="weekly" label="Weekly" />
      </SideNavigationGroup>
    </SideNavigationSection>
    <SideNavigationSection label="Admin">
      <SideNavigationItem value="people" icon={<Icon icon={Users} size="sm" />} label="People" />
      <SideNavigationItem value="settings" icon={<Icon icon={Settings} size="sm" />} label="Settings" />
      <SideNavigationItem href="https://jnj.com" target="_blank" external label="Handbook" />
    </SideNavigationSection>
  </SideNavigationList>
  <SideNavigationFooter>
    <SideNavigationItem value="help" icon={<Icon icon={LifeBuoy} size="sm" />} label="Help" />
  </SideNavigationFooter>
</SideNavigation>

Compact mode (mode="compact")

Narrower rail for dense dashboards. Same composition as expanded; just sets a 224px width.

Show source

<SideNavigation mode="compact">…</SideNavigation>

Rail mode (mode="rail")

Icons only, 56px wide. Section labels hide; use tooltips on hover (not included here) for discoverability. Count badges render as a compact dot corner-anchored to the icon.

Show source

<SideNavigation mode="rail">…</SideNavigation>