Go to AntUIKit homepage

Usage

When to use Breadcrumb, how to link its crumbs, and the decisions it leaves to you.

When to use

A breadcrumb says where the reader is in a hierarchy and gives them the way back up it: a trail of links ending in the current page, which is text. It is secondary navigation, worth its row only when the hierarchy is deep enough that “up” is a real question.
  • The page sits two or more levels below the root, and the reader can arrive at it directly: from search, from a link, from a notification.
  • Every level is a place the reader can open on its own: an organization, a project, a folder, a file.
  • The trail is stable. A crumb that means one thing today and another next week is worse than no crumb.
Use something else when:
  • The hierarchy is one level deep. A single back link to the parent says the same thing in a quarter of the space.
  • The levels are a sequence, not a location: checkout, onboarding, a wizard. Use Steps, which also shows progress and completion.
  • It is the main way around the product. Use a Menu or a sidebar.
  • The “levels” are sibling panels of one page. Use Tabs: a tab is a view of this page, and a crumb is a different page.

items, and the two ways to link

Pass the trail as items. Each entry takes title, href or path, menu, onClick, className and style, and the list is built from the array.
  • The child form and routes are both retired. Breadcrumb.Item, Breadcrumb.Separator and routes are deprecated and warn at runtime. The two children are not exported from @/components/ui/breadcrumb.
  • href is the link, and path builds one. A path is joined to every earlier item's path and rendered as href={"#/" + paths.join("/")}, so a path trail produces hash links. Use href or itemRender for other URLs.
  • params fills the path and the title. title: "Project :projectId" with params={{ projectId: "7" }} renders the value, as long as the title is a string and there is no itemRender. params keeps the type of the object you pass.
  • itemRender is the route to a router link. It replaces the whole crumb body, so the anchor is yours: a Next <Link> or a TanStack <Link> goes here. Its second argument is params, with the type you passed, and the title is yours to fill.

The last crumb

The crumb the reader is on is text, and that depends on the item, not its position: an item with neither href nor path renders a <span>, and every other item renders an <a>.
  • Leave the last item's href off. A link back to the page the reader is already on is a no-op they have to discover by taking it.
  • The last crumb takes lastItemColor (colorText), and the rest take itemColor and linkColor (both colorTextDescription). Change those tokens rather than coloring crumbs one by one.
  • There is never a separator after the last crumb, so there is nothing to hide.
  • Use the page's own words. The last crumb reads as a title, and a reader compares it against the heading underneath it.

Separators

The default separator is chevron-right from your icon pack, set by AntuikitProvider. A separator you pass, or one set on your own ConfigProvider, wins.
  • separator on the component replaces it for the whole trail, and takes a string or a node.
  • separator="" removes the separators. An empty string still counts as a value, so it wins over the default.
  • An item of { type: "separator" } draws its own separator field or a slash. It ignores both the separator prop and the icon pack, so pass the glyph on the item itself.
  • The default separator flips in right-to-left layouts. Your own chevron-right needs rtl:-scale-x-100 to do the same.

A menu on a crumb

menu on an item turns that crumb into a dropdown with a chevron. Use it as a sibling picker, when the level has other values the reader might switch to, like another project or folder.
  • Menu entries take key, title or label, href and path. A path is appended to the crumb's own href, so the entries can be written relative to the level they hang from.
  • dropdownProps takes any Dropdown prop: placement, trigger, a controlled open. The default trigger is hover.
  • dropdownIcon is that chevron. It defaults to the pack's chevron-down, and one you pass wins.
  • Keep it to the levels that have siblings. A chevron on every crumb reads as a menu bar.
  • It is not reachable from a keyboard. Read the Accessibility tab before you put anything behind it.

A long trail

There is no maxCount, and nothing truncates for you. The list is a wrapping flex row, so a trail that outgrows its line wraps onto a second one.
  • Aim for four crumbs. Past that the trail is no longer read at a glance.
  • Collapse the middle, never the ends: the root and the parent are the crumbs a lost reader uses. Replace the middle with one item whose title is a more icon and whose menu lists the levels it hides.
  • Shorten a crumb's words before you shorten the trail. A long title clipped inside one crumb keeps the shape of the hierarchy.
  • In a flex row, give the breadcrumb's column min-w-0 so a long path shrinks instead of pushing its neighbors out.
  • Watch the wrap across routes. A trail that is one row on one page and two on the next moves the heading underneath it every time the reader navigates.

Icons

A leading icon goes inside the item's title, beside the word, and a glyph from any pack lines up with the text.
  • Wrap the word in its own <span>. The gap after the icon only applies to a span, so bare text sits against the icon.
  • One icon, on one crumb, and usually the root. A glyph on every level turns the trail into a toolbar.
  • An icon-only crumb still needs its word. The Accessibility tab has the shape.
Border BeamButton
© 2026 AntUIKit . All rights reserved.