Breadcrumb

한눈에#

페이지 계층에서 현재 위치까지의 경로를 보여주는 내비게이션입니다 — 마지막 항목은 링크가 아닌 현재 위치(aria-current="page")입니다.

사용 시점#

페이지 계층 경로의 현재 위치를 보여주면 Breadcrumb — 동등 뷰 전환이나 순차 진행 단계는 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { Breadcrumb } from '@wds/ui-web';

<Breadcrumb
  items={[
    { label: '홈', href: '/' },
    { label: '프로젝트', href: '/projects' },
    { label: '디자인 시스템' },
  ]}
/>

변형#

중간 항목에 href가 없으면 정적 텍스트로 렌더됩니다 — 그룹 라벨처럼 이동 대상이 아닌 단계를 표현할 때 씁니다.

크기#

size prop이 없습니다 — body-2 폰트의 단일 크기이며, 긴 경로는 줄바꿈(flex-wrap)으로 흘러내립니다.

상태#

• 링크 hover — link-hover 색 + 밑줄
• 링크 focus — :focus-visible 2px focus-ring 링
• 현재 위치(마지막 항목) — 링크가 아닌 text 색 + medium 굵기 텍스트

Props#

접근성#

• <nav aria-label="브레드크럼"> + ol/li — 보조기술이 "n개 항목의 경로"로 읽습니다
• 마지막 항목은 aria-current="page" — 현재 위치이므로 링크가 아닙니다
• 구분자 ChevronRightIcon은 장식(aria-hidden) — 낭독되지 않습니다
• 같은 페이지에 내비게이션이 여러 개면 label로 구분하세요

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).