Breadcrumb components

Q: What breadcrumb styles are available?

Set the type prop on Breadcrumbs to "text", "text-line" or "button", with "text" as the default. "text-line" adds top and bottom rules around the trail, and "button" gives each item a padded, hoverable background.

Q: How do I change the separator between breadcrumb items?

Pass divider="slash" to Breadcrumbs to swap the default "chevron" for a slash. The value is shared through BreadcrumbsContext, so you set it once on the parent and every Breadcrumbs.Item and Breadcrumbs.AccountItem picks it up. A single Breadcrumbs.Item can still override it with its own divider prop.

Q: How do I handle long breadcrumb trails that overflow?

Breadcrumbs collapses automatically via the maxVisibleItems prop, which defaults to 4. Anything beyond that is replaced with a clickable ellipsis item that expands the full trail, and passing maxVisibleItems={0} disables collapsing entirely.

Q: How do I add an icon to a breadcrumb item?

Pass the icon prop to Breadcrumbs.Item; it accepts either a component reference or a React element. Omit the children to get an icon-only crumb, which is how the examples render the home item.

Q: Can I show an avatar or workspace logo in a breadcrumb?

Yes, pass avatarSrc to Breadcrumbs.Item with an image URL. This renders an xs avatar inside a rounded ring instead of the usual icon and label styling, with the children shown next to it as the workspace name.

Q: How do I build an account switcher into the breadcrumbs?

Use Breadcrumbs.AccountItem, which is fully controlled: pass items (objects of id, name, email and avatar), the current selectedKey, and an onSelectionChange handler that receives the new key. It renders a Dropdown with single-selection semantics and disallowEmptySelection.

Q: How do the breadcrumbs mark the current page?

React Aria's Breadcrumbs treats the last item as the current page: its link gets aria-current="page", is disabled so it is not focusable, and is styled through the isCurrent render prop. The trail is wrapped in a <nav aria-label="Breadcrumbs">, and the collapse toggle is labeled "See all breadcrumb items".

Powerful and customizable React breadcrumb components built for modern applications and websites. These breadcrumbs are built using React Aria and styled with Tailwind CSS.

Breadcrumbs example

Get the code

Installation

You can add this breadcrumbs component using our CLI or manually:

CLI

Manual

npx untitledui@latest add breadcrumbs

Breadcrumbs examples

Below are examples and variations of this breadcrumbs component:

API reference

Import the parts and assemble them:

import { Breadcrumbs } from "@/components/application/breadcrumbs/breadcrumbs";
 
<Breadcrumbs>
    <Breadcrumbs.Item />
    <Breadcrumbs.AccountItem />
</Breadcrumbs>

Breadcrumbs

Renders a <nav> element.

Breadcrumbs props
Prop	Type	Default	Description
`children`* (required)	`ReactNode`	—	The `Breadcrumbs.Item` and `Breadcrumbs.AccountItem` elements to render.
`divider`	`"chevron""slash"`	`"chevron"`	Separator drawn between items. Applied to every item through context.
`type`	`"text""text-line""button"`	`"text"`	Visual style of the trail — plain text, text framed by top and bottom rules, or button-like items with a hover background.
`className`	`string`	—	Additional class name for the `nav` wrapper.
`maxVisibleItems`	`number`	`4`	The maximum number of visible items. If the number of items exceeds this value, the breadcrumbs will collapse into a single item with an ellipsis that can be expanded.

Breadcrumbs.AccountItem

Import BreadcrumbAccountItem from @/components/application/breadcrumbs/breadcrumb-account-item. Renders React Aria’s Breadcrumb — all of its props are supported.

Breadcrumbs.AccountItem props
Prop	Type	Default	Description
`items`* (required)	`BreadcrumbAccountItemData[]`	—	Accounts listed in the switcher dropdown.
`selectedKey`* (required)	`string`	—	`id` of the currently active account. Its avatar and name are shown in the trail.
`onSelectionChange`* (required)	`(key: string) => void`	—	Called with the `id` of the account picked from the dropdown.

Breadcrumbs.Item

Import BreadcrumbItem from @/components/application/breadcrumbs/breadcrumb-item. Renders React Aria’s Breadcrumb — all of its props are supported.

Breadcrumbs.Item props
Prop	Type	Default	Description
`href`	`string`	—	Destination the item links to. Omit for a non-navigating item.
`divider`	`"chevron""slash"`	—	Separator drawn after the item. Defaults to the parent `Breadcrumbs` divider.
`type`	`"text""text-line""button"`	—	Visual style of the item. Defaults to the parent `Breadcrumbs` type.
`isEllipsis`	`boolean`	—	Renders the item as an ellipsis ("...") placeholder that stands in for the collapsed middle items.
`children`	`ReactNode`	—	The item label.
`className`	`string`	—	Additional class name for the item wrapper.
`icon`	`ReactNode \| FC<{ className?: string; }>`	—	Leading icon. Pass as a component reference (e.g. `Home01`) or as an element.
`avatarSrc`	`string`	—	Avatar image URL. Renders an avatar-in-ring instead of the default icon + label.
`onClick`	`(() => void)`	—	Called when the item is pressed. Also used to expand the collapsed items when `isEllipsis` is set.

Props from React Aria (7)

Breadcrumbs.Item inherited props
Prop	Type	Default	Description
`id`	`Key`	—	A unique id for the breadcrumb, which will be passed to `onAction` when the breadcrumb is pressed.
`style`	`StyleOrFunction<BreadcrumbRenderProps>`	—	The inline style for the element. A function may be provided to compute the style based on component state.
`render`	`DOMRenderFunction<"li", BreadcrumbRenderProps>`	—	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements: You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`aria-describedby`	`string`	—	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	—	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-label`	`string`	—	Defines a string value that labels the current element.
`aria-labelledby`	`string`	—	Identifies the element (or elements) that labels the current element.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

FAQs

Please refer to our frequently asked questions page for more.

Set the type prop on Breadcrumbs to "text", "text-line" or "button", with "text" as the default. "text-line" adds top and bottom rules around the trail, and "button" gives each item a padded, hoverable background.

Pass divider="slash" to Breadcrumbs to swap the default "chevron" for a slash. The value is shared through BreadcrumbsContext, so you set it once on the parent and every Breadcrumbs.Item and Breadcrumbs.AccountItem picks it up. A single Breadcrumbs.Item can still override it with its own divider prop.

Breadcrumbs collapses automatically via the maxVisibleItems prop, which defaults to 4. Anything beyond that is replaced with a clickable ellipsis item that expands the full trail, and passing maxVisibleItems={0} disables collapsing entirely.

Pass the icon prop to Breadcrumbs.Item; it accepts either a component reference or a React element. Omit the children to get an icon-only crumb, which is how the examples render the home item.

Yes, pass avatarSrc to Breadcrumbs.Item with an image URL. This renders an xs avatar inside a rounded ring instead of the usual icon and label styling, with the children shown next to it as the workspace name.

Use Breadcrumbs.AccountItem, which is fully controlled: pass items (objects of id, name, email and avatar), the current selectedKey, and an onSelectionChange handler that receives the new key. It renders a Dropdown with single-selection semantics and disallowEmptySelection.

React Aria's Breadcrumbs treats the last item as the current page: its link gets aria-current="page", is disabled so it is not focusable, and is styled through the isCurrent render prop. The trail is wrapped in a <nav aria-label="Breadcrumbs">, and the collapse toggle is labeled "See all breadcrumb items".

Alerts Calendars