Breadcrumb

import Link from "next/link"

import {

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/breadcrumb.json

사용법

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

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

구성

다음 조합으로 Breadcrumb:

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

예제

Basic

홈 링크와 컴포넌트 링크가 있는 기본 Breadcrumb입니다.

import {
  Breadcrumb,
  BreadcrumbItem,

Custom separator

Use a custom component as children for <BreadcrumbSeparator /> to create a custom separator.

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

Dropdown

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

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

Collapsed

We provide a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long.

import Link from "next/link"

import {

Link component

To use a custom link component from your routing library, you can use the asChild prop on <BreadcrumbLink />.

import Link from "next/link"

import {

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

"use client"

import * as React from "react"

API 참조

Breadcrumb

The Breadcrumb component is the root navigation element that wraps all breadcrumb components.

BreadcrumbList

The BreadcrumbList component displays the ordered list of breadcrumb items.

BreadcrumbItem

The BreadcrumbItem component wraps individual breadcrumb items.

BreadcrumbLink

The BreadcrumbLink component displays a clickable link in the breadcrumb.

BreadcrumbPage

The BreadcrumbPage component displays the current page in the breadcrumb (non-clickable).

BreadcrumbSeparator

BreadcrumbSeparator 컴포넌트는 Breadcrumb 항목 사이의 구분자를 표시합니다. children을 전달해 기본 구분자 아이콘을 바꿀 수 있습니다.

BreadcrumbEllipsis

The BreadcrumbEllipsis component displays an ellipsis indicator for collapsed breadcrumb items.