Breadcrumb

Where this page sits, as cells in one frame. Ancestors are links and the current page is the cobalt cell. Past four levels, or under 480px of its own width, the earlier levels fold into a “…” menu; the parent and the page always show.

Loading the live example…

"use client"

import { useState } from "react"
import { Breadcrumb } from "@/components/keyline/ui/breadcrumb"
import { Button } from "@/components/keyline/ui/button"

const PATH = ["Shared drive", "Scranton", "Sales", "Clients", "Lackawanna County", "Q4 orders"]
const FILES: Record<string, string[]> = {
  "Shared drive": ["Scranton", "Stamford (archived)", "Corporate"],
  Scranton: ["Sales", "Accounting", "Warehouse", "Party Planning Committee"],
  Sales: ["Clients", "Price lists", "Leads"],
  Clients: ["Blue Cross of Pennsylvania", "Harper Collins", "Lackawanna County"],
  "Lackawanna County": ["Q3 orders", "Q4 orders", "Contract 2026.pdf"],
  "Q4 orders": ["DM-4107.pdf", "DM-4126.pdf"],
}

export function DriveFolder() {
  const [depth, setDepth] = useState(PATH.length)
  const here = PATH[depth - 1]

  return (
    <div className="grid gap-4">
      <Breadcrumb
        items={PATH.slice(0, depth).map((label, i) => ({
          label,
          // a link whose click opens the folder in place; a <button> here breaks in the folded menu
          render: <a href={`?folder=${encodeURIComponent(label)}`} onClick={(e) => (e.preventDefault(), setDepth(i + 1))} />,
        }))}
      />
      <ul aria-label={`In ${here}`} className="m-0 grid min-h-8 list-none items-center gap-2 p-0 text-[14px]">
        {FILES[here].map((f) => {
          const next = PATH[depth]
          return (
            <li key={f}>
              {f === next ? (
                <Button size="compact" variant="quiet" onClick={() => setDepth(depth + 1)}>
                  {f}
                </Button>
              ) : (
                f
              )}
            </li>
          )
        })}
      </ul>
    </div>
  )
}

Installation

npx shadcn@latest add @keyline-ui/breadcrumb

Run it where your components.json is. The first time, map the @keyline-ui registry: one command, in Installation.

Usage

import { Breadcrumb } from "@/components/keyline/ui/breadcrumb"

<Breadcrumb
  items={[
    { label: "Clients", href: "/clients" },
    { label: "Lackawanna County", href: "/clients/lackawanna" },
    { label: "Q4 orders" },
  ]}
/>

Props

Prop	Type	Default	Description
`items`	`{ label, href?, render? }[]`	`—`	Ancestors first, the current page last. `render` swaps the link for a router link or a button.
`maxItems`	`number`	`4`	Above this many, the levels before the parent fold into the menu.
`moreLabel`	`string`	`"Earlier levels"`	The name of the “…” button.
`layout`	`"control" \| "cell"`	`"control"`	`cell` sits in the top row of a panel or page header.

The folded levels open in a Keyline Menu, so the arrow keys move through them. The chevrons mirror in right-to-left text.