# Breadcrumb

> A page trail that shows where the current page sits in the hierarchy, built from composable parts inside a `<nav aria-label="breadcrumb">`.

## Facts

- **Product**: Crew OS
- **Family**: Navigation
- **Global**: `window.DigitalCrew.Breadcrumb`
- **Source**: `digitalcrew-orchestrator: components/ui/breadcrumb.tsx`
- **Import in the app**: `import { Breadcrumb } from "@/components/ui/breadcrumb";`
- **Live preview**: /design/components/breadcrumb/preview.html
- **Page**: /design/components/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` › `BreadcrumbItem`s. 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.

## API

```ts
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

```html
<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

- [Header](/design/components/header.md): The app's top bar: a sidebar toggle and a divider, followed by whatever you pass in.
- [ListMapToggle](/design/components/list-map-toggle.md): A two-button segmented switch between a List view and a Map view.
- [Pagination](/design/components/pagination.md): Numbered page links with previous/next and an ellipsis.
- [Sidebar](/design/components/sidebar.md): The app shell: a collapsible left sidebar beside an inset content panel (`SidebarProvider` › `Sidebar` + `SidebarInset`).
- [Tabs](/design/components/tabs.md): A segmented list that switches panels in place: a 36px `muted` track with 3px padding; the active tab lifts onto `background`.
- [ThemeSwitcher](/design/components/theme-switcher.md): A round icon button with a Light, Dark and System menu that sets the next-themes theme.