Breadcrumb

Guidelines#

Use it for the top of detail pages several levels deep (workspace → campaigns → one campaign, prospects → company → person).

What you provide: Breadcrumb › BreadcrumbList › BreadcrumbItems. Inside an item use BreadcrumbLink (an <a>, or your router link with asChild) or, for the current page, BreadcrumbPage (aria-current="page"). Put a BreadcrumbSeparator between items; it renders a chevron by default, or any children you pass (for example "/"). BreadcrumbEllipsis stands in for collapsed levels.

Anatomy: the list is text-sm text-muted-foreground, wraps, with a 6px gap (10px from sm). Links go hover:text-foreground with a colour transition; the current page is text-foreground font-normal. Separator icons are 14px (size-3.5). The ellipsis is a 36px box with a 16px MoreHorizontal icon and a screen-reader "More" label.

Don't link the last item, show more than four or five levels (collapse the middle with the ellipsis), or use it as primary navigation.

Facts#

Group	Navigation
Product	Crew OS
Global	window.DigitalCrew.Breadcrumb
Source	digitalcrew-orchestrator: components/ui/breadcrumb.tsx
Import in the app	import { Breadcrumb } from "@/components/ui/breadcrumb";

API#

TypeScript declarations emitted from components/ui/breadcrumb.tsx (the module also exports Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis).

declare function Breadcrumb({ ...props }: React.ComponentProps<"nav">): any;
declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): any;
declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): any;
declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
    asChild?: boolean;
}): any;
declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): any;
declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): any;
declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): any;
export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    return h("div", { className: "grid gap-5" },
      h(DC.Breadcrumb, null,
        h(DC.BreadcrumbList, null,
          h(DC.BreadcrumbItem, null, h(DC.BreadcrumbLink, { href: "#" }, "Workspace")),
          h(DC.BreadcrumbSeparator),
          h(DC.BreadcrumbItem, null, h(DC.BreadcrumbLink, { href: "#" }, "Campaigns")),
          h(DC.BreadcrumbSeparator),
          h(DC.BreadcrumbItem, null, h(DC.BreadcrumbPage, null, "Q3 CFO outreach")))),
      h(DC.Breadcrumb, null,
        h(DC.BreadcrumbList, null,
          h(DC.BreadcrumbItem, null, h(DC.BreadcrumbLink, { href: "#" }, "Prospects")),
          h(DC.BreadcrumbSeparator, null, "/"),
          h(DC.BreadcrumbItem, null, h(DC.BreadcrumbEllipsis)),
          h(DC.BreadcrumbSeparator, null, "/"),
          h(DC.BreadcrumbItem, null, h(DC.BreadcrumbLink, { href: "#" }, "Northwind Traders")),
          h(DC.BreadcrumbSeparator, null, "/"),
          h(DC.BreadcrumbItem, null, h(DC.BreadcrumbPage, null, "Claire Dubois")))));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Navigation#