CortexcnCortexcn
Components

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Installation

Cortexcn
pnpm dlx shadcn@latest add @cortexcn/breadcrumb

Usage

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

Examples

Basic

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/breadcrumb"export function BreadcrumbBasic() {  return (    <div className="flex flex-col gap-6 items-center justify-center">      <Breadcrumb>        <BreadcrumbList>          <BreadcrumbItem>            <BreadcrumbLink href="#">Home</BreadcrumbLink>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbLink href="#">Components</BreadcrumbLink>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>          </BreadcrumbItem>        </BreadcrumbList>      </Breadcrumb>    </div>  )}

With dropdown

import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/breadcrumb"import { Button } from "@/components/button"import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/dropdown-menu"export function BreadcrumbWithDropdown() {  return (    <div className="flex flex-col gap-6 items-center justify-center">      <Breadcrumb>        <BreadcrumbList>          <BreadcrumbItem>            <BreadcrumbLink href="#">Home</BreadcrumbLink>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <DropdownMenu>              <DropdownMenuTrigger asChild>                <Button size="icon-sm" variant="ghost">                  <BreadcrumbEllipsis />                  <span className="sr-only">Toggle menu</span>                </Button>              </DropdownMenuTrigger>              <DropdownMenuContent align="start">                <DropdownMenuItem>Documentation</DropdownMenuItem>                <DropdownMenuItem>Themes</DropdownMenuItem>                <DropdownMenuItem>GitHub</DropdownMenuItem>              </DropdownMenuContent>            </DropdownMenu>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbLink href="#">Components</BreadcrumbLink>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>          </BreadcrumbItem>        </BreadcrumbList>      </Breadcrumb>    </div>  )}
import Link from "next/link"import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/breadcrumb"export function BreadcrumbWithLink() {  return (    <div className="flex flex-col gap-6 items-center justify-center">      <Breadcrumb>        <BreadcrumbList>          <BreadcrumbItem>            <BreadcrumbLink asChild>              <Link href="#">Home</Link>            </BreadcrumbLink>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbEllipsis />          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbLink asChild>              <Link href="#">Components</Link>            </BreadcrumbLink>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>          </BreadcrumbItem>        </BreadcrumbList>      </Breadcrumb>    </div>  )}

Adapted from the shadcn/ui Breadcrumb (MIT).