Component

Breadcrumb

Chevron-separated trail; the last item is aria-current=page.

Basic

With icons

label accepts any ReactNode, so an icon and text can share one item.

Collapsed long path

Middle segments collapse to an ellipsis item on deep hierarchies.

Items wrap onto a second line on narrow viewports rather than overflowing

Router links

renderLink renders each linked crumb through your router's Link - next/link here - so the trail navigates client-side. The current page is never a link, so it never reaches renderLink.

API reference

Prop	Type	Default	Description
items *	BreadcrumbItem[]	None	The trail, root first. The last entry renders as the current page rather than a link.
renderLink	((item: BreadcrumbItem, children: React.ReactNode, linkProps: BreadcrumbLinkProps) => React.ReactNode)	None	Renders each linked ancestor's anchor (e.g. Next's `Link`); the current page is never a link. The third argument holds Fuji's anchor props (`href`, `className`, `children`), merged in if not spread.

items *None

BreadcrumbItem[]

The trail, root first. The last entry renders as the current page rather than a link.

renderLinkNone

((item: BreadcrumbItem, children: React.ReactNode, linkProps: BreadcrumbLinkProps) => React.ReactNode)

Renders each linked ancestor's anchor (e.g. Next's `Link`); the current page is never a link. The third argument holds Fuji's anchor props (`href`, `className`, `children`), merged in if not spread.

Also accepts everything from React.HTMLAttributes<HTMLElement>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent