Live component development with hot reload

@fieldflow360/org-ui

Active tab
app-breadcrumbs

AppBreadcrumbs

Trail of links for hierarchy navigation. Optional toolbar renders at the end of the row (right-aligned) for status text, search/filter, or icon-only action buttons (use Button with iconOnly and aria-label — do not use the title prop with iconOnly; in org-ui, title is reserved for visible button text). In apps that use FieldFlowAppLayout without a custom breadcrumbRenderer, pass breadcrumbToolbar instead.

Basic (items only)

Minimal usage

import { AppBreadcrumbs } from '@fieldflow360/org-ui';
import Link from 'next/link';

const items = [
  { id: 'a', label: 'Analytics', href: '/organizations/1/analytics' },
  { id: 'b', label: 'Settings', isCurrent: true },
];

<AppBreadcrumbs
  items={items}
  linkComponent={(props) => (
    <Link href={props.href} className={props.className} onClick={props.onClick}>
      {props.children}
    </Link>
  )}
/>

With toolbar (icon actions + filter)

toolbar prop

import { AppBreadcrumbs, Button, ButtonVariantEnum, SearchInput } from '@fieldflow360/org-ui';

<AppBreadcrumbs
  items={breadcrumbItems}
  linkComponent={...}
  toolbar={
    <>
      <span className="text-text-muted text-xs">Generation: idle</span>
      <SearchInput
        className="w-44"
        placeholder="Filter…"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        onClear={() => setQuery('')}
      />
      <Button
        iconOnly
        aria-label="Edit"
        variant={ButtonVariantEnum.SURFACE}
        size={ComponentSizeEnum.SM}
        leftIcon={<YourEditSvg />}
      />
      <Button
        iconOnly
        aria-label="Delete"
        variant={ButtonVariantEnum.DELETE}
        size={ComponentSizeEnum.SM}
        leftIcon={<YourDeleteSvg />}
      />
    </>
  }
/>

FieldFlowAppLayout integration

breadcrumbToolbar on layout (no custom renderer)

import { FieldFlowAppLayout } from '@fieldflow360/org-ui';

<FieldFlowAppLayout
  appTitle="Tile Design"
  logo={...}
  user={...}
  userMenuActions={...}
  breadcrumbs={[
    { id: 'farms', label: 'Farms', href: '/organizations/1/farms' },
    { id: 'field', label: 'Field A', isCurrent: true },
  ]}
  breadcrumbToolbar={
    <div className="flex items-center gap-2">
      <JobGenerationStatus />
      <SearchInput ... />
      <Button iconOnly aria-label="Edit" onClick={onEdit} leftIcon={<EditIcon />} />
      <Button iconOnly aria-label="Delete" onClick={onDelete} leftIcon={<DeleteIcon />} />
    </div>
  }
  breadcrumbLinkComponent={(props) => <Link ... />}
>
  {children}
</FieldFlowAppLayout>

If you pass breadcrumbRenderer, the layout does not inject breadcrumbToolbar — compose <AppBreadcrumbs toolbar={...} /> yourself inside the renderer (same pattern as Tile Design header slot).