---
title: Breadcrumb
description: Breadcrumbs show where the current page sits in a hierarchy. They help users backtrack without relying on the browser history alone.
---
import { meta as BreadcrumbMeta, Default } from '@/content/stories/breadcrumb';
import Canvas from '@/components/component-docs/canvas';
import Demo from '@/components/component-docs/demo';
export const config = {
dependencies: {
components: [Canvas, Demo],
scripts: [
'../../../components/component-docs/demo.script.tsx',
'../../../components/component-docs/canvas.script.tsx',
'../../../components/component-docs/controls.script.tsx',
],
},
};
# 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.
```tsx
import {
RuiBreadcrumb,
RuiBreadcrumbList,
RuiBreadcrumbItem,
RuiBreadcrumbLink,
RuiBreadcrumbPage,
RuiBreadcrumbSeparator,
} from '@ecopages/radiant-ui/breadcrumb';
HomeComponentsBreadcrumb
```
## 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:
| Part | CSS roles |
| --- | --- |
| List / items | `on-background` text |
| Links | `primary` color, hover underline |
| Current page | `on-background`, `font-medium` |
| Separator / ellipsis | `on-surface` (receded) |
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 (``) rendering a `