Breadcrumb

Where a page sits, with the middle folded into a menu when the trail is long.

Category: Navigation & layout
Access: Free with an account
Source: 170 lines · one file
States: 4 drawn

The decision inside it

The middle folds, never the ends

The first item anchors you and the last two are where you came from. The levels between are the ones nobody reads, so they go behind a menu that is still one click and one Tab away.

When to use it

Use Breadcrumb at the top of a page to show where it sits and link back up. Long trails fold their middle into a menu; pass linkComponent so links use your router.

Installation

How you get it

Paste this into Claude Code, Cursor, Codex or any coding agent. It installs the file and uses it as it is, instead of writing a new one.

Use Liro's Breadcrumb for this.
Install it: npx shadcn@latest add @liro/breadcrumb
(the @liro registry is set up in components.json, with LIRO_KEY in .env.local)
Import it from @/components/ui/breadcrumb.
Do not rewrite or restyle it. Pass my data through its props
and keep its built-in states.

For the full brief with every prop and the mistakes assistants usually make, use Copy prompt above. Free components install through the @liro registry with your CLI token: see the Namespaced tab.

Usage

components/page-trail.tsx

import Link from "next/link";
import { Breadcrumb } from "@/components/ui/breadcrumb";

export function PageTrail() {
  return (
    <Breadcrumb
      linkComponent={Link}
      items={[
        { label: "Madgixs", href: "/" },
        { label: "Clients", href: "/clients" },
        { label: "Vertically", href: "/clients/vertically" },
        { label: "Renewal 2027" },
      ]}
    />
  );
}

API reference

“Copy prompt” above puts a full brief on your clipboard, install command, dependencies, props, and the mistakes an assistant usually makes with this component.

Props

Read from the component’s own TypeScript interface when the site is built, so this table cannot drift from the file you install.

	Type		Notes
`items`	`BreadcrumbItem[]`	Yes	The trail, from the top level to the current page.
`maxItems`	`number`	No	Collapse the middle into a "…" menu past this many items. Default 4. 0 never collapses.
`separator`	`React.ReactNode`	No	Drawn between items. Default a chevron.
`linkComponent`	`React.ElementType`	No	Your router's link, e.g. Next.js Link. Default a plain <a>.
`size`	`"sm" \| "md"`	No	sm for page headers in dense apps, md for docs. Default md.