# Breadcrumb The trail from the top of the site to the current page: a labelled `

` with an ordered list of links, the last item marked `aria-current="page"`. A long trail keeps its first and last steps and collapses the middle into a `Menu`. ```tsx import { Breadcrumb } from "@/components/ouro/breadcrumb/breadcrumb"; ``` ## Example ```tsx ``` ## Use instead when - Use `Navbar` or `Sidebar` instead for the app's main sections, and `Tabs` for views of one page. ## Props Type: `BreadcrumbProps`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `className` | `string` | | Layout only: margins, width, grid placement (`mb-4`). Appearance classes warn in development. | | `closeLabel` | `string` | `"Close"` | The text of the item that closes the hidden steps' sheet on a phone. | | `items` (required) | `readonly BreadcrumbItem[]` | | The trail from the top of the site to the current page, which is the last item. | | `label` | `string` | `"Breadcrumb"` | Names the navigation for screen readers. | | `maxItems` | `number` | `4` | The longest trail shown in full. A longer one keeps the first item and the last ones (`maxItems - 2` of them, at least the current page) and puts the middle in a menu, which is a bottom sheet below 640px. | | `moreLabel` | `string` | `"More"` | The name of the "…" button that opens the hidden steps. | | `ref` | `Ref` | | Reaches the rendered element. | ## Don't use These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix. - `children`: Not rendered. The trail is data: ``. - `links`: Not a prop. Ouro UI uses `items`: ``. - `separator`: Not a prop. Breadcrumb draws its own separators. ## `className` is for layout only Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`). Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn. Alignment classes (`text-center`) warn too: set alignment on a parent element. ## Types ### `BreadcrumbItem` One step of a Breadcrumb's trail. ```ts interface BreadcrumbItem { /** The page's name: "Recipes". */ label: string; /** * Where the step goes; internal paths go through `OuroProvider`'s `linkComponent`. Every * item needs one except the last, the current page, which renders as text. */ href?: string | undefined; /** * An icon before the label, as an element: `icon: `. It is hidden from * screen readers, so the label still names the step. */ icon?: ReactNode; } ```