Navigation

Workflow Breadcrumb

A pill breadcrumb for agent workspaces, release flows, and nested product tools.

breadcrumbworkflownav

Installation

Copy and paste the code into your project.

Accessibility notes

Use a nav landmark with a descriptive aria-label and real links for each parent route.

Preview accent

TypeScript

const crumbs = ["Workspace", "Agents", "Release"];

export function WorkflowBreadcrumb() {
  return (
    <nav aria-label="Workflow breadcrumb" className="rounded-full border border-white/12 bg-[#0b0f14]/82 px-3 py-2 shadow-xl backdrop-blur">
      <ol className="flex items-center gap-2 text-xs font-semibold">
        {crumbs.map((crumb, index) => (
          <li key={crumb} className="flex items-center gap-2">
            <button className={index === crumbs.length - 1 ? "text-[#d8fffb]" : "text-slate-400 transition hover:text-white"} type="button">
              {crumb}
            </button>
            {index < crumbs.length - 1 ? <span className="text-slate-600">/</span> : null}
          </li>
        ))}
      </ol>
    </nav>
  );
}

Usage

<WorkflowBreadcrumb />

Related components

Navigation

Floating Nav Dock

Intermediate

A pill-shaped navigation dock with translucent depth and compact labels.

navdockglass

View component

Navigation

Context Menu Panel

Intermediate

A floating action menu for editor surfaces, AI workspaces, and command-rich tools.

menuactionsfloating

View component

1Brief
2Design
3Code

Navigation

Progress Stepper

Intermediate

A horizontal stepper for onboarding, generation pipelines, and design workflows.

stepsprogressworkflow

View component