Y2K UI

Breadcrumb

A Y2K-styled breadcrumb navigation with thick navy border, pastel hover states, and chevron separators.

breadcrumb-demo.app

Installation

terminal.sh
npx y2kui@latest add breadcrumb

Usage

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

Parts

ComponentDescription
BreadcrumbNav wrapper with aria-label.
BreadcrumbListOL with thick border and card bg.
BreadcrumbItemList item wrapper.
BreadcrumbLinkClickable link with pink hover.
BreadcrumbPageCurrent page (bold, no link).
BreadcrumbSeparatorChevronRight icon separator.
BreadcrumbEllipsisTruncated "···" indicator.

Badge

A Y2K pastel badge component with thick navy outline. Six color variants for labels, status indicators, and tags.

Button

A Y2K flat button component with thick navy outline and pastel fill. Supports loading states, leading/trailing icons, and 6 color variants. Built on Radix UI.

On this page

BreadcrumbInstallationUsageParts