Breadcrumb

깊은 정보 구조에서 현재 위치와 상위 경로를 보여줍니다.

목적

Breadcrumb는 현재 화면이 제품 정보 구조의 어디에 있는지 보여주고 상위 단계로 돌아가는 경로를 제공한다. 브라우저 뒤로 가기를 복제하기보다 안정적인 계층을 표현한다.

선택 기준

목록 → 대상 → 하위 설정처럼 계층이 두 단계 이상일 때 사용한다.
한 단계 화면이나 전역 내비게이션만으로 위치가 분명한 화면에서는 생략한다.
작업 이력, 최근 방문 순서, 단계형 진행 상태에는 사용하지 않는다.
PageHeader의 상위 맥락으로 배치하고 별도의 큰 탐색 블록으로 만들지 않는다.

구조

Breadcrumb nav 안에 BreadcrumbList를 두고, 각 단계는 BreadcrumbItem으로 감싼다. 이동 가능한 단계는 BreadcrumbLink, 현재 단계는 BreadcrumbPage를 사용한다. 항목 사이에는 BreadcrumbSeparator를 둔다. 중간 단계를 접어야 할 때 BreadcrumbEllipsis를 사용한다.

변형과 크기

별도 variant나 size prop은 없다. 기본은 작은 본문 크기이며 목록은 줄바꿈할 수 있다. BreadcrumbLink의 asChild로 제품 router의 Link를 그대로 사용하면서 시각 스타일을 적용할 수 있다.

Breadcrumb type에는 separator가 선언돼 있지만 현재 렌더러가 separator를 자동 생성하지 않는다. 구분자를 바꾸려면 각 BreadcrumbSeparator의 children을 명시한다.

상태와 동작

이동 가능한 Link는 hover 색 변화가 있고 현재 Page는 aria-current="page"와 비활성 링크 역할을 가진다. 현재 단계는 클릭 가능하게 만들지 않는다. Ellipsis가 실제 메뉴를 열어야 한다면 단독 Ellipsis 대신 접근 가능한 menu trigger를 별도로 구성한다.

콘텐츠

각 단계는 짧고 안정적인 명사로 쓴다. 같은 대상 이름이 PageHeader title과 반복되어도 현재 위치를 식별하는 데 필요하면 유지한다. 내부 ID, 긴 설명, 상태 문구는 breadcrumb에 넣지 않는다.

접근성

root는 aria-label="breadcrumb"인 nav를 렌더하고 현재 Page는 aria-current="page"를 제공한다. Separator와 Ellipsis 장식은 읽기 순서에서 제외된다. Link 문구만으로 목적지를 이해할 수 있어야 한다. router Link를 사용할 때 asChild로 실제 anchor semantics를 보존한다.

좁은 화면과 긴 콘텐츠

기본 목록은 줄바꿈과 단어 분리를 허용한다. 화면이 좁다고 글자 크기를 줄이지 않는다. 경로가 길면 루트, 의미 있는 가까운 상위 단계, 현재 단계만 남기고 생략 구간을 Ellipsis로 표현한다. 현재 대상 이름을 의미가 사라질 정도로 축약하지 않는다.

공개 API

Breadcrumb: nav; separator?: ReactNode가 type에 포함되지만 자동 렌더링하지 않음
BreadcrumbList, BreadcrumbItem: ol, li 구조
BreadcrumbLink: anchor props와 asChild?: boolean
BreadcrumbPage: 현재 페이지 span
BreadcrumbSeparator: 표시용 separator item
BreadcrumbEllipsis: 생략 표시

예제

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@classum/dot-design-system/ui';

export function CurriculumBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/curriculums">커리큘럼</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/curriculums/onboarding">신규 입사자 온보딩</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>발행 설정</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

피해야 할 사용

클릭 이력을 breadcrumb 계층처럼 나열하지 않는다.
현재 Page를 다시 현재 URL로 연결하지 않는다.
모든 단계를 Ellipsis 뒤에 숨기지 않는다.
breadcrumb만 두고 PageHeader title을 생략하지 않는다.
구분자를 텍스트로 직접 입력해 screen reader가 반복해서 읽게 하지 않는다.

목적