Breadcrumb

A navigation trail showing the current page location within a hierarchy.

Import

import { Breadcrumb } from '@oztix/roadie-components/breadcrumb'

Examples

Default

<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href='#'>Home</Breadcrumb.Link>
      <Breadcrumb.Separator />
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Link href='#'>Components</Breadcrumb.Link>
      <Breadcrumb.Separator />
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Current>Breadcrumb</Breadcrumb.Current>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Composition

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.

With custom separator

Pass a custom character or element to Breadcrumb.Separator.

<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href='#'>Home</Breadcrumb.Link>
      <Breadcrumb.Separator>{'>'}</Breadcrumb.Separator>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Link href='#'>Settings</Breadcrumb.Link>
      <Breadcrumb.Separator>{'>'}</Breadcrumb.Separator>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Current>Profile</Breadcrumb.Current>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

With custom component

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.

import Link from 'next/link'


<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link render={<Link href='/' />}>Home</Breadcrumb.Link>
      <Breadcrumb.Separator />
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Current>Current page</Breadcrumb.Current>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Truncation

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.

<div className='max-w-xs'>
  <Breadcrumb>
    <Breadcrumb.List>
      <Breadcrumb.Item>
        <Breadcrumb.Link href='#'>Home</Breadcrumb.Link>
        <Breadcrumb.Separator />
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <Breadcrumb.Link href='#'>A long category name</Breadcrumb.Link>
        <Breadcrumb.Separator />
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <Breadcrumb.Current>An even longer current page title</Breadcrumb.Current>
      </Breadcrumb.Item>
    </Breadcrumb.List>
  </Breadcrumb>
</div>

Accessibility

  • Landmark: Renders as a <nav> element with aria-label="Breadcrumb" for screen reader navigation.
  • Current page: Use Breadcrumb.Current (renders as <span>) for the active page — screen readers won't announce it as a link.

API reference

Breadcrumb

No additional props — forwards all standard HTML attributes to the underlying element.

Breadcrumb.Current

No additional props — forwards all standard HTML attributes to the underlying element.

Breadcrumb.Item

No additional props — forwards all standard HTML attributes to the underlying element.

Breadcrumb.Link

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`.

asElementType
Deprecated

Deprecated: Use `render` instead. `as` will be removed in v3.0.0.

hrefstring

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.

externalboolean

Force external-link treatment when `href` is set. Has no effect when `render` is set — the consumer's element owns its own target/rel.

targetstring

Override the auto `target='_blank'` default on external hrefs.

relstring

Override the auto `rel='noopener noreferrer'` default on external hrefs.

renderRoadieRenderProp

Escape hatch — swap the underlying element with full control over the rendered shape.

classNamestring

Breadcrumb.List

No additional props — forwards all standard HTML attributes to the underlying element.

Breadcrumb.Separator

No additional props — forwards all standard HTML attributes to the underlying element.

Previous page← TextareaNext pageSteps →