Breadcrumb

Overview

Breadcrumb is the shared breadcrumb trail used in panel topbars and nested navigation contexts.

It renders a horizontal trail of labels separated by chevrons, with:

• clickable intermediate crumbs via onClick
• active-state styling on the current crumb
• automatic width-based truncation with ellipsis
• skeleton loading state

Use Breadcrumb inside Panel.Topbar.Left alongside Panel.Close for hierarchical panel navigation.

Basic Usage

import { Breadcrumb } from '@fsai/shared-ui';

<Breadcrumb
  items={[
    { label: 'Projects', onClick: () => navigateToProjects() },
    { label: 'Website Redesign', onClick: () => navigateToProject() },
    { label: 'Task Details', isActive: true },
  ]}
/>

In A Panel Topbar

<Panel.Topbar>
  <Panel.Topbar.Left>
    <Panel.Close />
    <Breadcrumb items={breadcrumbItems} />
  </Panel.Topbar.Left>
</Panel.Topbar>

This is the standard panel-header pattern documented on the Panel component page.

Loading State

<Breadcrumb items={items} isLoading={isLoading} />

While loading, the breadcrumb renders a skeleton placeholder instead of the trail.

Props

BreadcrumbItem

Truncation Behavior

Breadcrumb automatically truncates long trails based on available container width:

• it observes the container width via ResizeObserver
• it keeps at least the first and last items visible
• it inserts an ellipsis (…) crumb when items are collapsed
• intermediate items are hidden from the middle of the trail

The component uses flex-1 and overflow-hidden so it shares space gracefully with other topbar controls.

Important Conventions

• Mark the current page or deepest level with isActive: true.
• Provide onClick on navigable intermediate crumbs.
• The last item typically has isActive: true and no onClick.
• Breadcrumb does not handle routing — it only calls the onClick handlers you provide.

Guidelines

• Do use Breadcrumb in panel topbars for hierarchical navigation
• Do mark the current level with isActive
• Do use isLoading while breadcrumb data is fetching
• Don't use Breadcrumb for primary app navigation — use page-level nav or tabs
• Don't hardcode truncation — the component handles it responsively