Breadcrumb
먼저 보고, 그다음 계약을 읽습니다
현재 위치까지의 페이지 경로 트레일 (semantic <nav> + <ol>).
Component intent의도와 경계 읽기
<nav aria-label="Breadcrumb"> 안에 <ol> 리스트로 경로를 표시하는 compound 컴포넌트다. Breadcrumb · BreadcrumbList · BreadcrumbItem · BreadcrumbLink · BreadcrumbSeparator · BreadcrumbCurrent 를 조합해 마크업한다. 마지막(현재 페이지) 항목은 링크가 아니라 BreadcrumbCurrent 로 표시하며 aria-current="page" 가 자동 부여된다. 구분자 기본값은 "›" 이며 separator prop 이나 children 으로 교체할 수 있다. 순수 semantic + CSS — 상호작용 JS 가 없다.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbCurrent,} from "@axe/ui";<Breadcrumb> <BreadcrumbList> <BreadcrumbItem><BreadcrumbLink href="/">홈</BreadcrumbLink></BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem><BreadcrumbLink href="/ui">UI</BreadcrumbLink></BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem><BreadcrumbCurrent>Layout</BreadcrumbCurrent></BreadcrumbItem> </BreadcrumbList></Breadcrumb>import { BreadcrumbSeparator } from "@axe/ui";<BreadcrumbSeparator separator="/" /><nav class="axe-breadcrumb" aria-label="Breadcrumb"> <ol class="axe-breadcrumb__list"> <li class="axe-breadcrumb__item"><a class="axe-breadcrumb__link" href="/">홈</a></li> <li class="axe-breadcrumb__separator" role="presentation" aria-hidden="true">›</li> <li class="axe-breadcrumb__item"><a class="axe-breadcrumb__link" href="/ui">UI</a></li> <li class="axe-breadcrumb__separator" role="presentation" aria-hidden="true">›</li> <li class="axe-breadcrumb__item"><span class="axe-breadcrumb__current" aria-current="page">Layout</span></li> </ol></nav>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
ariaLabel | string | — | "Breadcrumb" | <Breadcrumb> nav 의 aria-label (i18n override). |
separator | React.ReactNode | — | "›" | <BreadcrumbSeparator> 의 구분 문자/요소. children 이 있으면 children 이 우선. |
...rest | React.HTMLAttributes | — | — | 각 sub-export 는 대응 HTML 요소 props 를 그대로 전파: Breadcrumb→<nav>, BreadcrumbList→<ol>, BreadcrumbItem→<li>, BreadcrumbLink→<a>, BreadcrumbCurrent→<span>, BreadcrumbSeparator→<li>. |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-breadcrumb | stable | <nav> 루트 (text-sm, secondary 색). |
.axe-breadcrumb__list | stable | <ol> 리스트 (flex wrap, gap). |
.axe-breadcrumb__item | stable | <li> 개별 항목. |
.axe-breadcrumb__link | stable | <a> 링크 (hover/focus-visible 상태). |
.axe-breadcrumb__current | stable | 마지막 현재 항목 <span> (primary 색, ellipsis truncate 24ch). |
.axe-breadcrumb__separator | stable | 구분자 <li> (muted, aria-hidden). |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
- 표준 링크 Tab 순회 (별도 키 상호작용 없음)
루트 <nav aria-label="Breadcrumb">(ariaLabel prop 로 변경). BreadcrumbCurrent = aria-current="page" 자동. BreadcrumbSeparator = role="presentation" + aria-hidden="true" (SR 가 구분자를 읽지 않음).
마지막 항목은 링크가 아니라 BreadcrumbCurrent(비-링크 현재 위치)로 표시. 순수 semantic 마크업 — JS 불요.