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

Use the as prop on Breadcrumb.Link to render with a custom component like Next.js Link.

import Link from 'next/link'


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

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

as?ElementType

@deprecated Use `render` instead. `as` will be removed in v3.0.0.

href?string

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.

external?boolean

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

target?string

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

rel?string

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

render?RoadieRenderProp

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

className?string

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 →