antuikit's Breadcrumb is Ant Design's Breadcrumb, installed into your project as a file you own. It takes the same props, merges className through cn(), and keeps the type of params, so itemRender reads your own object.
It also centers every crumb and separator on the row. antd sets them on the text baseline, so an icon, an avatar or a count in a title sat a little high or low. In the kit they line up with the text with no extra classes.
The separator and a dropdown crumb's chevron come from your icon pack, set by AntuikitProvider. A separator or dropdownIcon you pass, or one set on your own ConfigProvider, wins.
Install
npx antuikit@latest init
npx antuikit@latest add breadcrumb
The first command sets up AntuikitProvider and the theme tokens, and the second adds this component.
Import
From @/components/ui/breadcrumb, never from antd. The file is yours once it is installed, so the import path is a path in your project rather than a package.
import { Breadcrumb } from "@/components/ui/breadcrumb"
The axes
Breadcrumb has no enumerated props. Its colors come from three tokens: linkColor for links, itemColor for plain crumbs (both colorTextDescription) and lastItemColor for the current page (colorText). Change the tokens to make the trail louder or quieter.
Flags
Breadcrumb has no boolean props either. Three things switch on whether a value is there.
An item with no href and no path is text. An item renders an <a> when it has one and a <span> when it has neither, which is how the last crumb becomes plain text.
separator="" removes separators. An empty string still counts as a value, so it wins over the default.
menu on an item turns that crumb into a Dropdown trigger. The object is the switch, and dropdownProps sets up the popup.
Slots
The props that take a node. Use a slot for your own markup before reaching for a descendant selector.
separator is the glyph between crumbs, for the whole trail, and never after the last one. An item of { type: "separator" } draws its own field or a slash and ignores this prop, so pass the glyph on the item.
dropdownIcon is the chevron beside a crumb with a menu. It defaults to the pack's chevron-down.
children is the deprecated Breadcrumb.Item form, and neither Item nor Separator is exported. Use items.
itemRender is a function that returns a crumb's whole body, so the anchor is yours, which is what a router link needs. Its second argument is params, with the type you passed.
Per item, title is the crumb's own slot. A leading icon goes inside it, with the word in a <span>: the gap after the icon only applies to a span.
Events
Breadcrumb has no event props of its own. Items take onClick, and the API table below lists the rest.
Styling
classNames and styles take the same keys, one per part. Use them before a descendant selector, since the keys stay stable across versions.
1
<Breadcrumb
2
classNames={{
3
root: "…",
4
item: "…",
5
separator: "…",
6
}}
7
/>
A Tailwind class on one of these keys overrides the default style without !important. Writing a component token's CSS variable on the root has no effect, so style the part instead, or set the token in your theme.
API Reference
Breadcrumb
Breadcrumb's props. Rows marked antuikit in the Version column are added by the kit.