Signature / Moleculestable

Glass Breadcrumb

Pill-style breadcrumb with glass indicators and collapsible items.

@glinui/uiComponent: glass-breadcrumb

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

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

Usage$

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

Basic$

TSX

1import { GlassBreadcrumb } from "@glinui/ui"
2
3export function GlassBreadcrumbDemo() {
4return (
5  <div className="flex items-center justify-center p-8">
6    <GlassBreadcrumb
7      items={[
8        { id: "home", label: "Home", href: "/" },
9        { id: "docs", label: "Docs", href: "/docs" },
10        { id: "components", label: "Components", href: "/docs/components" },
11        { id: "breadcrumb", label: "Breadcrumb" }
12      ]}
13    />
14  </div>
15)
16}

Examples$

Collapsed$

Use maxItems to collapse middle items into an ellipsis.

TSX

1import { GlassBreadcrumb } from "@glinui/ui"
2
3export function GlassBreadcrumbCollapsedDemo() {
4return (
5  <div className="flex items-center justify-center p-8">
6    <GlassBreadcrumb
7      maxItems={3}
8      items={[
9        { id: "home", label: "Home", href: "/" },
10        { id: "docs", label: "Docs", href: "/docs" },
11        { id: "components", label: "Components", href: "/docs/components" },
12        { id: "signature", label: "Signature", href: "/docs/components" },
13        { id: "breadcrumb", label: "Breadcrumb" }
14      ]}
15    />
16  </div>
17)
18}

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

Source$

TSX

1import { 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-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

GlassBreadcrumbProps

`GlassBreadcrumbProps`

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