Breadcrumb

The path from the top level to the current page. Past a set length the middle collapses into a menu, long names truncate with the full name on hover, and an item can carry a menu of its siblings.

Navigation & layout Free170 lines · one file

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 Layro's Breadcrumb for this.
Install it: npx shadcn@latest add @layro/breadcrumb
(the @layro registry is set up in components.json, with LAYRO_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 @layro 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.

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