Breadcrumb: Collapsed

Wrap middle segments in <BreadcrumbCollapse />. They hide behind an ellipsis and slide open in place, and focus moves to the first revealed link. Pass open and onOpenChange to control it.

"use client"

import * as React from "react"

import {
  Breadcrumb,
  BreadcrumbCollapse,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Button } from "@/components/ui/button"

export function BreadcrumbControlled() {
  const [open, setOpen] = React.useState(false)

  return (
    <div className="flex flex-col items-center gap-4">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Home</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbCollapse open={open} onOpenChange={setOpen}>
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Documents</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="#">2026</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
          </BreadcrumbCollapse>
          <BreadcrumbItem>
            <BreadcrumbPage>Invoices</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
      <Button variant="outline" size="sm" onClick={() => setOpen(!open)}>
        {open ? "Collapse" : "Expand"}
      </Button>
    </div>
  )
}

Add this example

This adds the example as components/examples/breadcrumb/controlled.tsx, together with the Breadcrumb component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/breadcrumb-controlled.json

To add only the component, follow the Breadcrumb installation.

Props in this example

The Breadcrumb props this example sets, from the API reference.

BreadcrumbLink

Prop	Type	Default
`href`	`string`	`–`

BreadcrumbCollapse

Prop	Type	Default
`open`	`boolean`	`–`
`onOpenChange`	`(open: boolean) => void`	`–`

Every prop is in the Breadcrumb API reference.

More Breadcrumb examples

See them all, with keyboard support and accessibility notes, on the Breadcrumb page.