Liquid Glass Breadcrumb

Navigation 30

About

A breadcrumb navigation trail with frosted glass surface, blur, and animated links for showing a page's location in a hierarchy.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Liquid Glass Breadcrumb to your project and fits it to your theme.

Code

How Liquid Glass Breadcrumb is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import LiquidGlassBreadcrumb from "@/components/ui/liquid-glass-breadcrumb";

export default function LiquidGlassBreadcrumbDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[var(--lg-bg)] p-10">
      <LiquidGlassBreadcrumb
        items={[
          { label: "Home", href: "#" },
          { label: "Products", href: "#" },
          { label: "Glass" },
        ]}
      />
    </div>
  );
}