Breadcrumb

Breadcrumbs show where the current page sits in a hierarchy. They help users backtrack without relying on the browser history alone.

Try it

Usage

Compose the trail with RuiBreadcrumbList, RuiBreadcrumbItem, RuiBreadcrumbLink, and RuiBreadcrumbPage for the current location.

import {
  RuiBreadcrumb,
  RuiBreadcrumbList,
  RuiBreadcrumbItem,
  RuiBreadcrumbLink,
  RuiBreadcrumbPage,
  RuiBreadcrumbSeparator,
} from '@ecopages/radiant-ui/breadcrumb';
 
<RuiBreadcrumb label="Breadcrumb">
  <RuiBreadcrumbList>
    <RuiBreadcrumbItem><RuiBreadcrumbLink href="/">Home</RuiBreadcrumbLink></RuiBreadcrumbItem>
    <RuiBreadcrumbSeparator />
    <RuiBreadcrumbItem><RuiBreadcrumbLink href="/components/button">Components</RuiBreadcrumbLink></RuiBreadcrumbItem>
    <RuiBreadcrumbSeparator />
    <RuiBreadcrumbItem><RuiBreadcrumbPage>Breadcrumb</RuiBreadcrumbPage></RuiBreadcrumbItem>
  </RuiBreadcrumbList>
</RuiBreadcrumb>

Mark the current page

The last item should use RuiBreadcrumbPage, not a link. Earlier segments link to ancestor routes.

Truncate long trails

When the hierarchy is deep, collapse middle segments with RuiBreadcrumbEllipsis and expose the full path on demand.

Theming

Breadcrumb roles map to semantic surface + link roles, never Tailwind palette steps:

Check the compiled breadcrumb.css for the exact roles. Override at the theme layer, not in component CSS.

Accessibility

• The root element renders as a nav landmark with an accessible name from the label prop.
• The current page is indicated with aria-current="page".
• Separators are hidden from assistive technologies with aria-hidden.

API

RuiBreadcrumb is a custom element (<rui-breadcrumb>) rendering a <nav> landmark; the trail is authored light-DOM children via the view helpers.

Attributes (<rui-breadcrumb>)

Slots

View helpers

CSS classes

Public BEM classes (documented via @cssclass):

Theme roles