Glin UI
Radix UIBase UI
Primitive / Moleculebeta

Breadcrumb

Navigation trail with separators, collapsed ellipsis and variant-capable links.

Edit on GitHub

Deployments

Every build of Lumen web, newest first.

Installation

Install from
pnpm dlx @glinui/cli@latest add breadcrumb

Prefer the package?

Usage

Separators

Pass any node as the separator, and keep the current page as plain text with BreadcrumbPage.

"use client"



import { FileText } from "@phosphor-icons/react"
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator
} from "@glinui/ui"



export function BreadcrumbFilesExample() {
  return (
    <div className="mx-auto grid w-full max-w-xl gap-4">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem><BreadcrumbLink href="#">Documents</BreadcrumbLink></BreadcrumbItem>
          <BreadcrumbSeparator>/</BreadcrumbSeparator>
          <BreadcrumbItem><BreadcrumbLink href="#">Contracts</BreadcrumbLink></BreadcrumbItem>
          <BreadcrumbSeparator>/</BreadcrumbSeparator>
          <BreadcrumbItem><BreadcrumbPage><FileText aria-hidden="true" className="me-1 inline size-4" />Vendor agreement.pdf</BreadcrumbPage></BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem><BreadcrumbLink href="#">Settings</BreadcrumbLink></BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem><BreadcrumbPage>Billing</BreadcrumbPage></BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>
  )
}

Variants

Every look of the shared vocabulary: glinr (the default), plain (shadcn), solid, soft, outline, ghost, gradient and glass. Omit `variant` to follow the ambient design style.

glinr
plain
solid
soft
outline
ghost
gradient
glass
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@glinui/ui"



const variants = ["glinr", "plain", "solid", "soft", "outline", "ghost", "gradient", "glass"] as const



export function Demo() {
  return (
    <div className="grid gap-3">
      {variants.map((variant) => (
        <Breadcrumb key={variant} variant={variant}>
          <BreadcrumbList>
            <BreadcrumbItem><BreadcrumbLink href="#">Home</BreadcrumbLink></BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem><BreadcrumbLink href="#">Docs</BreadcrumbLink></BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      ))}
    </div>
  )
}

Glass (opt-in)

Glass is opt-in and needs a colourful or photographic backdrop to read as frosted. Pick one in the stage header.

import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@glinui/ui"



export function Demo() {
  return (
    <Breadcrumb variant="glass">
      <BreadcrumbList>
        <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem><BreadcrumbPage>Settings</BreadcrumbPage></BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Accessibility

  • Rendered as a nav landmark labelled breadcrumb with an ordered list.
  • The current page is marked with aria-current=page.
  • Separators are hidden from assistive tech; the ellipsis exposes a screen reader label.

Keyboard Interactions

KeyAction
TabMove through breadcrumb links in order.

ARIA Attributes

  • `aria-label="breadcrumb"` on nav
  • `aria-current="page"` on BreadcrumbPage
  • `aria-hidden` on separators

Reduced Motion

Only color transitions are used, and they are disabled with prefers-reduced-motion.

Affected properties

color

API Reference

Breadcrumb

PropTypeRequiredDefaultDescription
variant"glinr" | "plain" | "solid" | "soft" | "outline" | "ghost" | "gradient" | "glass"-ambient style (glinr)Omit it for the ambient design style: a bare trail whose current page is a raised pill. `plain` is a flat trail, `solid`, `soft`, `outline` and `gradient` wrap it in a pill, `glass` is opt-in and needs a backdrop. Legacy `default` follows the ambient style, `frosted` maps to `glass`.
asChildbooleanNo-Auto-generated from TypeScript source.

BreadcrumbLink

PropTypeRequiredDefaultDescription
asChildbooleanNofalseRender your router link instead of an anchor.

BreadcrumbSeparator / BreadcrumbEllipsis / BreadcrumbPage

PropTypeRequiredDefaultDescription
childrenReactNode-CaretRightSeparator only: custom separator icon. Flips automatically in RTL.
asChildbooleanNo-Auto-generated from TypeScript source.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Breadcrumb } from "@glinui/ui"

Source Files

breadcrumb.tsx

Dependencies

@glinui/ui@phosphor-icons/react@radix-ui/react-slotclass-variance-authority

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/breadcrumb.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

BreadcrumbProps

BreadcrumbLinkProps

PropTypeRequiredDefaultDescription
asChildbooleanNo--

BreadcrumbProps

PropTypeRequiredDefaultDescription
variantPanelVariantPropNo-Surface look. Omit for the ambient design style (glinr by default): a bare trail whose current page is a raised pill. `solid`, `soft`, `outline`, `gradient` and `glass` wrap the trail in a pill; `glass` is opt-in and needs a rich backdrop.