브레드크럼

브레드크럼은 링크의 계층 구조를 이용해 현재 리소스까지의 경로를 보여주는 컴포넌트예요. 사용자가 현재 어디에 있는지 파악하고 상위 페이지로 쉽게 이동할 수 있게 도와주죠. 접힘(collapsed) 상태, 커스텀 구분자, 라우팅 라이브러리의 링크 등 다양한 상황에 유연하게 대응할 수 있어요.

출처: 문서

본문

설치하기

init 명령으로 프로젝트를 초기화했다면, 다음 명령어로 브레드크럼 컴포넌트를 바로 추가할 수 있어요.

CLI Manual

npx shadcn@latest add breadcrumb

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

사용하기

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

BreadcrumbList 안에 BreadcrumbItem과 BreadcrumbSeparator를 번갈아 배치하면 돼요. 마지막 항목(현재 페이지)은 BreadcrumbPage로 표시해 링크가 아닌 텍스트로 보여줄 수 있어요.

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

예시

사용자 정의 구분자 (Custom separator)

<BreadcrumbSeparator />의 children으로 커스텀 컴포넌트를 넣으면 원하는 구분자를 만들 수 있어요.

import { Slash } from "lucide-react"

...

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>
      <Slash />
    </BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

드롭다운 (Dropdown)

<BreadcrumbItem />을 <DropdownMenu />와 함께 조합하면 브레드크럼 안에 드롭다운을 넣을 수 있어요.

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

...

<BreadcrumbItem>
  <DropdownMenu>
    <DropdownMenuTrigger className="flex items-center gap-1">
      Components
      <ChevronDownIcon />
    </DropdownMenuTrigger>
    <DropdownMenuContent align="start">
      <DropdownMenuItem>Documentation</DropdownMenuItem>
      <DropdownMenuItem>Themes</DropdownMenuItem>
      <DropdownMenuItem>GitHub</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</BreadcrumbItem>

접힘 (Collapsed)

브레드크럼이 너무 길어질 때는 <BreadcrumbEllipsis /> 컴포넌트로 접힌 상태를 보여줄 수 있어요.

import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb"

...

<Breadcrumb>
  <BreadcrumbList>
    {/* ... */}
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    {/* ... */}
  </BreadcrumbList>
</Breadcrumb>

링크 컴포넌트 (Link component)

라우팅 라이브러리의 커스텀 링크 컴포넌트를 쓰고 싶다면 <BreadcrumbLink />에 asChild prop을 넘기면 돼요. 이를 통해 Next.js의 Link처럼 앱에서 사용하는 링크를 그대로 활용할 수 있어요.

import { Link } from "next/link"

...

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <Link href="/">Home</Link>
      </BreadcrumbLink>
    </BreadcrumbItem>
    {/* ... */}
  </BreadcrumbList>
</Breadcrumb>

반응형 (Responsive)

<BreadcrumbItem />를 <BreadcrumbEllipsis />, <DropdownMenu />, <Drawer />와 조합하면 반응형 브레드크럼을 만들 수 있어요. 데스크톱에서는 드롭다운을, 모바일에서는 드로어를 보여주는 방식이죠.

더 알아보기 (Learn more)

Radix UI — 브레드크럼은 Radix UI 프리미티브 없이 자체적으로 구현되어 있어요.

브레드크럼