Breadcrumb

현재 페이지의 위치를 계층 경로로 표시하는 내비게이션 컴포넌트입니다. nav · ol 시맨틱 구조와 aria-current="page"로 접근성을 지원합니다.

기본

이전 단계는 링크, 마지막 항목은 현재 페이지로 표시합니다.

separator로 구분자 스타일을 변경합니다.

icon으로 아이콘만 있는 첫 항목을 표시합니다.

size로 텍스트 크기를 조절합니다.

긴 경로는 첫 항목·생략 버튼·직전 단계·현재 페이지만 표시합니다.

비활성 링크는 disabled를 사용합니다.

Prop	타입	기본값	설명
`items`	Array<{ label, href?, current?, disabled?, as? }>	[]	경로 데이터. BreadcrumbItem 슬롯 대체
`aria-label`	string	경로	nav aria-label
`separator`	'chevron' \| 'slash' \| 'dot'	chevron	breadcrumb_sep-slash · breadcrumb_sep-dot
`size`	'sm' \| 'md' \| 'lg'	md	breadcrumb_sm · breadcrumb_lg

Prop	타입	기본값	설명
`label`	string	—	항목 텍스트
`href`	string	—	링크 URL
`current`	boolean	false	is-current · aria-current="page"
`disabled`	boolean	false	is-disabled
`icon`	boolean	false	breadcrumb_link-icon
`aria-label`	string	—	아이콘 전용 링크 라벨
`as`	string \| Component	a	링크 루트 요소. NuxtLink 같은 커스텀 링크 컴포넌트 지정
`ripple`	boolean	true	클릭 파장(ripple). true 시 data-ripple 활성 · false 비활성. 기본 활성

슬롯	설명
`default`	BreadcrumbItem 나열 (items prop 대체)

슬롯	설명
`default`	링크 텍스트·아이콘 (label 대체)

Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스	설명
`breadcrumb · breadcrumb_list · breadcrumb_item`	루트·목록·항목
`breadcrumb_link · breadcrumb_sep`	링크·구분자
`breadcrumb_ellipsis`	생략 메뉴 버튼 — data-ripple
`breadcrumb_sep-slash · breadcrumb_sep-dot`	구분자 스타일
`breadcrumb_sm · breadcrumb_lg`	크기 변형
`is-current · is-disabled`	현재·비활성
`data-ripple`	클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용
`data-ripple="false"`	해당 요소 ripple 비활성
`data-no-ripple`	하위 전체 ripple 비활성

토큰	기본값	설명
`--breadcrumb-gap · --breadcrumb-font-size`	—	간격·글자 크기
`--breadcrumb-sep-color`	—	구분자 색