콘텐츠로 건너뛰기
1.6k

이동 경로

해당 페이지가 사이트 계층 구조 내에서 어디에 위치하는지 — 문서, 스토어 카테고리, 대시보드의 링크 경로 — 를 굵은 네오브루탈리즘 서체로 표시합니다.

import Link from "next/link"

import {

브레드크럼은 현재 페이지가 사이트 계층 구조에서 어디에 있는지 보여 주고 그 위의 모든 단계를 링크로 연결합니다. Base UI 프리미티브이 아니라 시맨틱 HTML(nav + <ol>)이며, render prop 합성을 위해 Base UI의 useRender를 사용합니다. 네오브루탈리즘 공식에 맞춰 링크는 제목 서체로, 현재 페이지는 굵은 전경색 서체로 표시합니다.

다음과 같은 경우에 사용합니다.

  • 문서와 지식 베이스 — Docs / Components / Breadcrumb처럼, 사이드바를 헤집지 않고 한 단계 위로 빠져나갈 수 있습니다.
  • 이커머스 카테고리 트리 — Home / Clothing / Jackets 덕분에 깊숙한 상품 페이지에서 클릭 한 번에 벗어납니다.
  • 대시보드와 파일 브라우저 — URL만으로는 위치를 짐작하기 어려운 중첩 프로젝트, 설정, 폴더 경로.

설치

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/breadcrumb.json
npx shadcn@latest add https://neobrutalism.com/r/base/breadcrumb.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/breadcrumb.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/breadcrumb.json

다음 코드를 복사해 프로젝트에 붙여넣습니다.

components/ui/breadcrumb.tsx
import * as React from "react"
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"

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("font-head 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-medium 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 className="cn-rtl-flip" />}
    </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,
}

프로젝트 설정에 맞게 import 경로를 업데이트합니다.

사용법

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink render={<a href="/" />}>Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink render={<a href="/components" />}>
        Components
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

구성

Breadcrumb을 만들려면 다음 구성을 사용합니다:

Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    └── BreadcrumbItem
        └── BreadcrumbPage

예제

기본

홈 링크와 컴포넌트 링크를 갖춘 기본적인 브레드크럼입니다.

import {
  Breadcrumb,
  BreadcrumbItem,

커스텀 구분선

<BreadcrumbSeparator />의 children으로 커스텀 컴포넌트를 사용해 커스텀 구분선을 만듭니다.

import Link from "next/link"
import { DotIcon } from "lucide-react"

드롭다운

<BreadcrumbItem />과 <DropdownMenu />를 조합해 브레드크럼 안에 드롭다운을 만들 수 있습니다.

import Link from "next/link"
import { ChevronDownIcon, DotIcon } from "lucide-react"

접힘

브레드크럼이 너무 길 때 접힌 상태를 표시하기 위한 <BreadcrumbEllipsis /> 컴포넌트를 제공합니다.

import Link from "next/link"

import {

링크 컴포넌트

라우팅 라이브러리의 커스텀 링크 컴포넌트를 사용하려면 <BreadcrumbLink />의 render prop을 사용합니다.

import Link from "next/link"

import {

RTL

Neobrutalism에서 RTL을 활성화하는 방법은 RTL 설정 가이드를 참조하세요.

"use client"

import Link from "next/link"

접근성

브레드크럼은 WAI-ARIA Breadcrumb 패턴을 따릅니다. Breadcrumb은 순서 있는 목록을 감싸는 <nav aria-label="breadcrumb"> 랜드마크를 렌더링하므로, 스크린 리더가 이를 브레드크럼 내비게이션으로 알려 주고 사용자는 곧바로 그곳으로 건너뛸 수 있습니다. BreadcrumbPage는 현재 위치를 표시하는 aria-current="page"를 갖고, 구분 기호는 aria-hidden이라 소리로 읽히지 않습니다. 각 항목은 평범한 링크여서 Tab과 Enter가 표준대로 동작하며, 별도의 키보드 처리는 필요하지 않습니다.

API 참조

Breadcrumb

Breadcrumb 컴포넌트는 모든 브레드크럼 컴포넌트를 감싸는 루트 내비게이션 요소입니다.

PropTypeDefault
classNamestring-

BreadcrumbList

BreadcrumbList 컴포넌트는 브레드크럼 항목을 순서 있는 목록으로 표시합니다.

PropTypeDefault
classNamestring-

BreadcrumbItem

BreadcrumbItem 컴포넌트는 개별 브레드크럼 항목을 감쌉니다.

PropTypeDefault
classNamestring-

BreadcrumbLink

BreadcrumbLink 컴포넌트는 브레드크럼 안에 클릭 가능한 링크를 표시합니다.

PropTypeDefault
classNamestring-

BreadcrumbPage

BreadcrumbPage 컴포넌트는 브레드크럼 안에 현재 페이지를 표시합니다(클릭 불가).

PropTypeDefault
classNamestring-

BreadcrumbSeparator

BreadcrumbSeparator 컴포넌트는 브레드크럼 항목 사이에 구분선을 표시합니다. 커스텀 children을 전달하여 기본 구분선 아이콘을 덮어쓸 수 있습니다.

PropTypeDefault
childrenReact.ReactNode-
classNamestring-

BreadcrumbEllipsis

BreadcrumbEllipsis 컴포넌트는 접힌 브레드크럼 항목을 나타내는 생략 표시기를 표시합니다.

PropTypeDefault
classNamestring-