# antuikit / Breadcrumb

> Breadcrumb. Centers every crumb and separator on the row.

Docs: https://antuikit.com/docs/components/breadcrumb

## Install

npx antuikit@latest init
npx antuikit@latest add breadcrumb

## Import

import { Breadcrumb } from "@/components/ui/breadcrumb";

## Demos

- [Basic](https://ui.antuikit.com/embed/breadcrumb/basic.md): Pass `items` with a `title` each, and an `href` on the crumbs that link back up, and the last crumb reads as the current page.
- [With icons](https://ui.antuikit.com/embed/breadcrumb/with-icons.md): Put an icon before the text in an item's `title`, or use an icon alone with an `aria-label`, like a folder for the root.
- [Separator](https://ui.antuikit.com/embed/breadcrumb/separator.md): Set `separator` to any string or node to replace the default chevron, like a slash or a bullet.
- [Per-item separators](https://ui.antuikit.com/embed/breadcrumb/separator-per-item.md): Add items of `{ type: "separator" }` to place each separator yourself and mix them in one trail, like a colon after a label.
- [Dropdown items](https://ui.antuikit.com/embed/breadcrumb/dropdown-menu.md): Give an item a `menu` to open a dropdown of its siblings from that crumb, like the other workspaces or branches.
- [Folding a deep path](https://ui.antuikit.com/embed/breadcrumb/ellipsis-overflow.md): Shorten a deep path by replacing the middle crumbs with one `more` icon whose `menu` lists the crumbs it hides.
- [params and path](https://ui.antuikit.com/embed/breadcrumb/params.md): Pass `params` to fill `:name` placeholders in each item's `path` and `title`, and each crumb links to every `path` before it joined.
- [itemRender](https://ui.antuikit.com/embed/breadcrumb/item-render.md): Pass `itemRender` to draw each crumb yourself, like your router's link for ancestors and bold text for the current page.
- [Avatar crumbs](https://ui.antuikit.com/embed/breadcrumb/avatar-crumbs.md): Put an `Avatar` beside the name in each `title` for a trail of people, like an owner and the people under them.
- [Pill crumbs](https://ui.antuikit.com/embed/breadcrumb/pill-crumbs.md): Render each `title` as a round `Tag`, with subtle ancestors and a colored current page, inside a small card.
- [Counts in a crumb](https://ui.antuikit.com/embed/breadcrumb/counts.md): Put a count beside the label in a `title`: a small round `Tag` for a plain total like assigned tickets, and a `Badge` for one that needs attention like overdue ones.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/breadcrumb`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Breadcrumb` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.