Ouro HX

Navigation

Breadcrumb

The trail from the top of the site to the current page: a labelled <nav> 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.

Install

Once per app, with Tailwind CSS v4 and an @/* path alias (Ouro HX is built on Base UI, so --base base; skip -t in an existing app):

npx shadcn@latest init --base base --preset nova --yes --no-monorepo
npx shadcn@latest add ourostack/ouro-ui/ouro-base#v1.2.13

Then the component. From v0.8.0 it installs only the helpers it imports and never touches your stylesheet (Installing):

npx shadcn@latest add ourostack/ouro-ui/breadcrumb#v1.2.13

Or, with the @ouro namespace set up:

npx shadcn@latest add @ouro/ouro-base @ouro/breadcrumb

Its tests, stories and Playwright spec are optional. They need Vitest 4.1.11 or later, and from v0.8.0 never change a version your app has (Testing):

npx shadcn@latest add ourostack/ouro-ui/breadcrumb#v1.2.13 ourostack/ouro-ui/breadcrumb-tests#v1.2.13
import { Breadcrumb } from "@/components/ouro/breadcrumb/breadcrumb";

Paths use shadcn's default @/ alias; the CLI rewrites them to yours.

Example

<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Recipes", href: "/recipes" },
    { label: "Short ribs" },
  ]}
/>

Use instead when

  • Use Navbar or Sidebar instead for the app's main sections, and Tabs for views of one page.

Props

Type: BreadcrumbProps.

className
Type: string
Layout only: margins, width, grid placement (mb-4). Appearance classes warn in development.
closeLabel
Type: string
Default: "Close"
The text of the item that closes the hidden steps' sheet on a phone.
items (required)
Type: readonly BreadcrumbItem[]
The trail from the top of the site to the current page, which is the last item.
label
Type: string
Default: "Breadcrumb"
Names the navigation for screen readers.
maxItems
Type: number
Default: 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
Type: string
Default: "More"
The name of the "…" button that opens the hidden steps.
ref
Type: Ref<HTMLElement>
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: <Breadcrumb items={[{ label: "Home", href: "/" }, { label: "Ribs" }]} />.
  • links: Not a prop. Ouro UI uses items: <Breadcrumb items={[{ label: "Home", href: "/" }, { label: "Ribs" }]} />.
  • 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.

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: <HomeIcon />`. It is hidden from
   * screen readers, so the label still names the step.
   */
  icon?: ReactNode;
}
Source on GitHubThis page as Markdown