Signature / Molecule

Glass Breadcrumb

Pill-style breadcrumb with glass indicators and collapsible items.

Edit on GitHub

pnpm dlx @glinui/cli@latest add glass-breadcrumb

launch-banner.png

2.4 MB, edited 3 hours ago by Jon Reyes

Installation$

Install from

pnpm dlx @glinui/cli@latest add glass-breadcrumb

Prefer the package?

Usage$

Pass an array of items with id, label, and optional href. The last item is highlighted as the current page.

Examples$

Variants$

GlassBreadcrumb is glass by default, with a readable opacity floor. It also accepts the shared vocabulary: glinr raises the current page as a pill, plain is flat and shadcn-like. Glass looks frosted only over a colourful or photographic backdrop: pick one in the stage header.

import { GlassBreadcrumb } from "@glinui/ui"


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


export function GlassBreadcrumbVariantsDemo() {
const items = [
  { id: "home", label: "Home", href: "/" },
  { id: "docs", label: "Docs", href: "/docs" },
  { id: "breadcrumb", label: "Breadcrumb" }
]
return (
  <div className="flex flex-col items-start gap-3">
    {variants.map((variant) => (
      <GlassBreadcrumb key={variant} variant={variant} items={items} />
    ))}
  </div>
)
}

Collapsed$

Use maxItems to collapse middle items into an ellipsis.

import { GlassBreadcrumb } from "@glinui/ui"


export function GlassBreadcrumbCollapsedDemo() {
return (
  <div className="flex items-center justify-center p-8">
    <GlassBreadcrumb
      maxItems={3}
      items={[
        { id: "home", label: "Home", href: "/" },
        { id: "docs", label: "Docs", href: "/docs" },
        { id: "components", label: "Components", href: "/docs/components" },
        { id: "signature", label: "Signature", href: "/docs/components" },
        { id: "breadcrumb", label: "Breadcrumb" }
      ]}
    />
  </div>
)
}

Accessibility$

Renders as <nav aria-label="Breadcrumb"> with an <ol> list.
The current page has aria-current="page".
Separators are aria-hidden.

Reduced Motion$

No animations, the component is fully static.

API Reference$

Prop	Type	Required	Default	Description
`items`	`GlassBreadcrumbItem[]`	Yes	`-`	Breadcrumb items
`maxItems`	`number`	No	`-`	Max items to show (rest collapsed)
`separator`	`React.ReactNode`	No	`"/"`	Separator character
`variant`	`PanelVariantProp`	No	`-`	Surface look. Glass by default (its identity, with a readable opacity floor). Pass `glinr`, `plain`, `solid`, `soft`, `outline`, `ghost` or `gradient` for a crisp trail.

Source$

import { GlassBreadcrumb } from "@glinui/ui"

packages/ui/src/components/glass-breadcrumb.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/glass-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

GlassBreadcrumbProps