Breadcrumb

Installation#

1. Install the dependencies

   npm install cn radix-ui lucide-react

2. Copy the source into your project

   components/ui/breadcrumb.tsx

   import * as React from "react"import { cn } from "cn"import { Slot } from "radix-ui"import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {  return (    <nav      aria-label="breadcrumb"      data-slot="breadcrumb"      className={cn(className)}      {...props}    />  )}function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {  return (    <ol      data-slot="breadcrumb-list"      className={cn(        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",        className      )}      {...props}    />  )}function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-item"      className={cn("inline-flex items-center gap-1", className)}      {...props}    />  )}function BreadcrumbLink({  asChild,  className,  ...props}: React.ComponentProps<"a"> & {  asChild?: boolean}) {  const Comp = asChild ? Slot.Root : "a"  return (    <Comp      data-slot="breadcrumb-link"      className={cn("transition-colors hover:text-foreground", className)}      {...props}    />  )}function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-page"      role="link"      aria-disabled="true"      aria-current="page"      className={cn("font-normal text-foreground", className)}      {...props}    />  )}function BreadcrumbSeparator({  children,  className,  ...props}: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-separator"      role="presentation"      aria-hidden="true"      className={cn("[&>svg]:size-3.5", className)}      {...props}    >      {children ?? (        <ChevronRightIcon />      )}    </li>  )}function BreadcrumbEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-ellipsis"      role="presentation"      aria-hidden="true"      className={cn(        "flex size-5 items-center justify-center [&>svg]:size-4",        className      )}      {...props}    >      <MoreHorizontalIcon      />      <span className="sr-only">More</span>    </span>  )}export {  Breadcrumb,  BreadcrumbList,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbPage,  BreadcrumbSeparator,  BreadcrumbEllipsis,}

3. Make sure the foundation is in place

   Components read their colors, radius and surfaces from the tokens in app/globals.css. See Theming.

Usage#

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

Examples#