Breadcrumbstandard

지금 보는 곳이 어디인지 상위 경로로 보여 주는 길 표시(브레드크럼, breadcrumb)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 `nav` 안의 `ol` 목록으로 그립니다.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/breadcrumb

Default

Basic

With Dropdown

With Link

breadcrumb-example.tsx

import Link from "next/link"
import {  Example,  ExampleWrapper,} from "@/components/example"import {  Breadcrumb,  BreadcrumbEllipsis,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbList,  BreadcrumbPage,  BreadcrumbSeparator,} from "@/components/ui/breadcrumb"import { Button } from "@/components/ui/button"import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuItem,  DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"
export default function BreadcrumbExample() {  return (    <ExampleWrapper>      <BreadcrumbBasic />      <BreadcrumbWithDropdown />      <BreadcrumbWithLink />    </ExampleWrapper>  )}
function BreadcrumbBasic() {  return (    <Example title="Basic" className="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>    </Example>  )}
function BreadcrumbWithDropdown() {  return (    <Example title="With Dropdown" className="items-center justify-center">      <Breadcrumb>        <BreadcrumbList>          <BreadcrumbItem>            <BreadcrumbLink href="#">Home</BreadcrumbLink>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <DropdownMenu>              <DropdownMenuTrigger                render={<Button size="icon-sm" variant="ghost" />}              >                <BreadcrumbEllipsis />                <span className="sr-only">Toggle menu</span>              </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>    </Example>  )}
function BreadcrumbWithLink() {  return (    <Example title="With Link" className="items-center justify-center">      <Breadcrumb>        <BreadcrumbList>          <BreadcrumbItem>            <BreadcrumbLink render={<Link href="#">Home</Link>} />          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbEllipsis />          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbLink render={<Link href="#">Components</Link>} />          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>          </BreadcrumbItem>        </BreadcrumbList>      </Breadcrumb>    </Example>  )}