Breadcrumb 빵조각 내비게이션

계층 경로 내비게이션입니다. 네이티브 nav + ol 의미를 기반으로 하며, 현재 페이지는 자동으로 aria-current="page"로 표시되고 클릭할 수 없습니다. 커스텀 구분 기호와 초과 항목 접기를 지원합니다.

기본 사용법

기본 사용법

1. 홈
2. 컴포넌트
3. Breadcrumb

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem>홈</LhBreadcrumbItem>
    <LhBreadcrumbItem>컴포넌트</LhBreadcrumbItem>
    <LhBreadcrumbItem>Breadcrumb</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem>홈</LhBreadcrumbItem>
    <LhBreadcrumbItem>컴포넌트</LhBreadcrumbItem>
    <LhBreadcrumbItem>Breadcrumb</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

링크 내비게이션

링크 내비게이션

1. 홈
2. 가이드
3. 현재 페이지

replace 모드

1. 히스토리 대체
2. 현재 페이지

<script setup lang="ts">
</script>

<template>
  <!-- 링크 내비게이션 -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/">홈</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/guide">가이드</LhBreadcrumbItem>
    <LhBreadcrumbItem>현재 페이지</LhBreadcrumbItem>
  </LhBreadcrumb>
  <!-- replace 모드 -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/" replace>히스토리 대체</LhBreadcrumbItem>
    <LhBreadcrumbItem>현재 페이지</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <!-- 링크 내비게이션 -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/">홈</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/guide">가이드</LhBreadcrumbItem>
    <LhBreadcrumbItem>현재 페이지</LhBreadcrumbItem>
  </LhBreadcrumb>
  <!-- replace 모드 -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/" replace>히스토리 대체</LhBreadcrumbItem>
    <LhBreadcrumbItem>현재 페이지</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

to가 전달된 항목은 <a>로 렌더링됩니다. vue-router가 감지되면 라우터 이동을 사용하고(replace로 히스토리 교체 여부를 제어), 그렇지 않으면 네이티브 내비게이션을 유지합니다. 마지막 항목은 항상 현재 페이지 텍스트로 렌더링됩니다.

커스텀 구분 기호

커스텀 구분 기호

1. 홈
2. 컴포넌트
3. 개별 구분 기호

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb separator="·">
    <LhBreadcrumbItem to="/">홈</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/components">컴포넌트</LhBreadcrumbItem>
    <LhBreadcrumbItem>
      <template #separator>➜</template>
      개별 구분 기호
    </LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb separator="·">
    <LhBreadcrumbItem to="/">홈</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/components">컴포넌트</LhBreadcrumbItem>
    <LhBreadcrumbItem>
      <template #separator>➜</template>
      개별 구분 기호
    </LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

초과 항목 접기

초과 항목 접기

1. 홈
2. 1차 디렉터리 A
3. 2차 디렉터리 B
4. 3차 디렉터리 C
5. 현재 페이지

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb :max-items="3">
    <LhBreadcrumbItem to="/">홈</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a">1차 디렉터리 A</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b">2차 디렉터리 B</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b/c">3차 디렉터리 C</LhBreadcrumbItem>
    <LhBreadcrumbItem>현재 페이지</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb :max-items="3">
    <LhBreadcrumbItem to="/">홈</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a">1차 디렉터리 A</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b">2차 디렉터리 B</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b/c">3차 디렉터리 C</LhBreadcrumbItem>
    <LhBreadcrumbItem>현재 페이지</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

maxItems를 초과하면 첫 항목 + 말줄임표 + 마지막 몇 개 항목을 유지합니다. 말줄임표를 클릭하면 전체가 펼쳐집니다.

Breadcrumb API

Props

속성	설명	타입	기본값
separator	구분 기호 문자	string	'/'
maxItems	최대 보이는 항목 수(첫 항목 + 말줄임표 + 마지막 몇 개 항목), 초과 시 접기	number	0
sx	sx 빠른 레이아웃 속성	LhSxProps	—

LhBreadcrumbItem Props

속성	설명	타입	기본값
to	이동 주소. 존재하고 마지막 항목이 아닐 때 링크로 렌더링	string	—
replace	vue-router로 이동할 때 replace 방식 사용 여부	boolean	false

Slots

슬롯	설명	적용 컴포넌트
default	빵조각 항목	LhBreadcrumb
default	항목 내용	LhBreadcrumbItem
separator	커스텀 구분 기호(전역 separator를 덮어씀)	LhBreadcrumbItem

접근성

• 루트 요소는 <nav aria-label>(언어 팩 breadcrumb.label 사용)이 <ol>을 감싸며, 의미 순서가 문서 순서와 같습니다
• 현재 페이지(마지막 항목)는 텍스트로 렌더링되고 자동으로 aria-current="page"가 설정되며, to를 전달해도 클릭할 수 없습니다
• 구분 기호는 aria-hidden="true"이며 접근성 트리에 들어가지 않습니다
• 접힌 말줄임표는 실제 <button>이며, aria-label은 언어 팩 breadcrumb.more를 사용하고 클릭 시 전체를 펼칩니다

타입 정의

이 컴포넌트가 외부로 내보내는 TypeScript 타입 구조는 다음과 같습니다(packages/components/breadcrumb/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 속성 설명은 위쪽 Props 표를 참고하세요).

LhBreadcrumbProps

export interface LhBreadcrumbProps {
  /** 구분 기호 문자 */
  separator?: string
  /** 최대 보이는 항목 수(첫 항목 + 말줄임표 + 마지막 몇 개 항목), 초과 시 접기. 0이거나 전달하지 않으면 접지 않음 */
  maxItems?: number
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhBreadcrumbItemProps

export interface LhBreadcrumbItemProps {
  /** 이동 주소. 존재하고 마지막 항목이 아닐 때 링크로 렌더링(vue-router가 감지되면 라우터 이동, 그렇지 않으면 네이티브 내비게이션) */
  to?: string
  /** vue-router로 이동할 때 replace 방식 사용 여부(라우터가 없으면 효과 없음) */
  replace?: boolean
}