Glass Breadcrumb for React

Preview

Demos ready. Update 0.

Installation

First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:

Install Glass Breadcrumb

pnpm dlx shadcn@4.14.1 add @glassyui/glass-breadcrumb

What this installs5 files, 2 packages

Direct registry declarations

These values belong to @glassyui/glass-breadcrumb itself in registry.json.

Package dependencies

@radix-ui/react-slot
clsx

Registry dependencies

@glassyui/glass-provider

File targets

components/glassyui/glass-breadcrumb.tsx

Complete installed closure

This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.

Package dependencies

@radix-ui/react-slot
clsx

Installed files

components/glassyui/glass-breadcrumb.tsx
components/glassyui/glass-provider.tsx
components/glassyui/liquid-filters.tsx
components/glassyui/lib/preferences.ts
components/glassyui/styles/liquid.css

Usage

import {
  GlassBreadcrumb,
  GlassBreadcrumbItem,
  GlassBreadcrumbLink,
  GlassBreadcrumbPage,
} from "@/components/glassyui/glass-breadcrumb";

export function Trail() {
  return (
    <GlassBreadcrumb>
      <GlassBreadcrumbItem>
        <GlassBreadcrumbLink href="/">Home</GlassBreadcrumbLink>
      </GlassBreadcrumbItem>
      <GlassBreadcrumbItem>
        <GlassBreadcrumbPage>Components</GlassBreadcrumbPage>
      </GlassBreadcrumbItem>
    </GlassBreadcrumb>
  );
}

Examples

With a router link

<GlassBreadcrumbLink asChild>
  <Link href="/docs">Docs</Link>
</GlassBreadcrumbLink>

Fold steps into a menu

<GlassBreadcrumbItem>
  <GlassMenu>
    <GlassMenuTrigger asChild>
      <GlassBreadcrumbEllipsis />
    </GlassMenuTrigger>
    <GlassMenuContent align="start">
      <GlassMenuItem>Docs</GlassMenuItem>
    </GlassMenuContent>
  </GlassMenu>
</GlassBreadcrumbItem>

API

GlassBreadcrumb

A nav landmark labelled Breadcrumb, holding an ordered list.

GlassBreadcrumbItem

One step. It draws the chevron after itself, except on the last.

GlassBreadcrumbLink

A link step. asChild renders your own link, such as a router’s.

GlassBreadcrumbPage

The current page, as text with aria-current="page".

GlassBreadcrumbEllipsis

A button that stands in for folded steps, so it can open a menu of them.

Notes

Rendering

Plain elements with no client JavaScript, so it works in server components.

Accessibility

Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.

Performance

Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.