Breadcrumb

현재 페이지 위치를 계층적으로 표시하는 네비게이션 컴포넌트입니다.

설치

Terminal

npx @msub-core/ui-cli add breadcrumb

사용법

TSX

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

function MyComponent() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">홈</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>현재 페이지</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

기본

Prop	Type	Default	Required	Description
BreadcrumbLink	component	-	No	클릭 가능한 링크 아이템
BreadcrumbPage	component	-	No	현재 페이지 (비활성 상태)
BreadcrumbSeparator	component	-	No	구분자 (기본: 화살표)
BreadcrumbEllipsis	component	-	No	생략 표시 (...)

커스텀 구분자

생략 표시

드롭다운과 함께

Next.js Link와 함께

Prop	Type	Default	Required	Description
asChild	boolean	false	No	자식 요소로 렌더링 (Slot 패턴)