A navigation trail showing the current page location within a hierarchy.
import { Breadcrumb } from '@oztix/roadie-components/breadcrumb'
Use Breadcrumb.List, Breadcrumb.Item, Breadcrumb.Link, Breadcrumb.Separator, and Breadcrumb.Current to build the trail. The last item uses Breadcrumb.Current instead of a link.
Pass a custom character or element to Breadcrumb.Separator.
Pass render on Breadcrumb.Link to use a custom component like Next.js Link. For internal routes you can also just pass href and let the RoadieLinkProvider route it.
Items never wrap. When the row runs out of room each item truncates with an ellipsis, while the separators stay put. Constrain the width to see it.
<nav> element with aria-label="Breadcrumb" for screen reader navigation.Breadcrumb.Current (renders as <span>) for the active page. Screen readers won't announce it as a link.No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.
BreadcrumbLink stays server-safe — `RoadieRoutedLink` is the `'use client'` boundary and only loads when `href` is set without `render`. Pass `render` (element / component / function form) for full control. The legacy `as` prop is `@deprecated`.
Deprecated: Use `render` instead. `as` will be removed in v3.0.0.
Pass an href to render the link as a routed anchor. Internal hrefs route through the configured `RoadieLinkProvider`; external hrefs (`http(s)://`, `//…`) render `<a target='_blank' rel='noopener noreferrer'>`; `mailto:` / `tel:` / `sms:` render plain `<a>`. `render` always wins — pass it to bypass provider routing.
Force external-link treatment when `href` is set. Has no effect when `render` is set — the consumer's element owns its own target/rel.
Override the auto `target='_blank'` default on external hrefs.
Override the auto `rel='noopener noreferrer'` default on external hrefs.
Escape hatch — swap the underlying element with full control over the rendered shape.
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.