Breadcrumb

현재 페이지의 계층 경로를 표시하는 내비게이션 컴포넌트

개요

iCignal Breadcrumb은 Foundation Breadcrumb을 래핑하여 경로 항목을 items 배열 데이터로 선언적으로 구성할 수 있도록 한 컴포넌트입니다. 링크, 현재 페이지, 생략(ellipsis) 드롭다운 3가지 항목 타입을 지원하며, 생략 항목은 내부적으로 iCignal DropdownMenu를 사용해 숨겨진 경로를 펼쳐 보여줍니다.

주요 특징

• ✅ 데이터 기반 구성: items 배열만으로 경로 렌더링
• ✅ 3가지 항목 타입: link(이동 가능), page(현재 위치), ellipsis(생략 드롭다운)
• ✅ 생략 드롭다운: ellipsis 항목 클릭 시 숨겨진 경로 메뉴 표시
• ✅ 커스텀 구분자: separator prop으로 구분자 변경 가능
• ✅ 마지막 항목 처리: 마지막 항목 뒤에는 구분자 미표시
• ✅ 접근성: nav, ol 시맨틱 마크업 및 aria-current 자동 적용

사용 예시

기본 사용법

link 타입 항목으로 상위 경로를, 마지막 page 타입 항목으로 현재 위치를 표시합니다.

<Breadcrumb
  items={[
    { type: "link", label: "홈", href: "/" },
    { type: "link", label: "컴포넌트", href: "/components" },
    { type: "page", label: "Breadcrumb" },
  ]}
/>

생략(Ellipsis) 경로

경로가 길 때 ellipsis 타입 항목으로 중간 경로를 드롭다운으로 숨길 수 있습니다. 클릭하면 items에 지정된 경로 목록이 메뉴로 표시됩니다.

<Breadcrumb
  items={[
    { type: "link", label: "홈", href: "/" },
    {
      type: "ellipsis",
      label: "생략된 경로",
      items: [
        { label: "프로젝트", href: "/projects" },
        { label: "디자인 시스템", href: "/projects/design-system" },
      ],
    },
    { type: "link", label: "컴포넌트", href: "/components" },
    { type: "page", label: "Breadcrumb" },
  ]}
/>

커스텀 구분자

separator prop으로 기본 구분자 대신 원하는 요소를 사용할 수 있습니다.

<Breadcrumb
  separator="/"
  items={[
    { type: "link", label: "홈", href: "/" },
    { type: "link", label: "문서", href: "/docs" },
    { type: "page", label: "시작하기" },
  ]}
/>
 
<Breadcrumb
  separator=">"
  items={[
    { type: "link", label: "홈", href: "/" },
    { type: "link", label: "문서", href: "/docs" },
    { type: "page", label: "시작하기" },
  ]}
/>

API Reference

Props

BreadcrumbItemProps

기본 사용법

import { Breadcrumb } from "@vortex/ui-icignal"
 
<Breadcrumb
  items={[
    { type: "link", label: "홈", href: "/" },
    { type: "link", label: "설정", href: "/settings" },
    { type: "page", label: "프로필" },
  ]}
/>

접근성

ARIA 속성

Foundation Breadcrumb(Base UI 기반 마크업)이 자동으로 제공합니다:

• nav + aria-label="breadcrumb" 시맨틱 내비게이션 래퍼
• 항목 목록은 ol(순서 있는 목록)로 렌더링
• 현재 페이지 항목에 aria-current="page" 자동 적용
• 구분자는 스크린리더에서 읽히지 않도록 처리

권장 사항

• ✅ 마지막 항목은 현재 페이지를 나타내는 page 타입으로 지정
• ✅ 경로가 깊어지면 ellipsis 타입으로 중간 경로 생략
• ❌ 현재 페이지 항목을 link 타입으로 지정하지 않음

관련 컴포넌트

• Breadcrumb (Foundation): Compound 구조의 Foundation 레이어 브레드크럼
• DropdownMenu (Foundation): ellipsis 항목의 드롭다운 메뉴
• Tabs (Foundation): 동일 레벨 페이지 간 전환 내비게이션