Breadcrumb 빵조각 내비게이션

현재 페이지가 계층 구조에서 위치한 경로를 보여줍니다. 사용자 정의 구분 기호, 긴 경로 접기, 링크 이동을 지원합니다.

빵조각 내비게이션

<template>
  <div class="demo-col" style="max-width: 640px; gap: 20px">
    <LhBreadcrumb>
      <LhBreadcrumbItem>홈</LhBreadcrumbItem>
      <LhBreadcrumbItem>송나라 그림</LhBreadcrumbItem>
      <LhBreadcrumbItem :to="'#'">범관</LhBreadcrumbItem>
      <LhBreadcrumbItem>계산행려도</LhBreadcrumbItem>
    </LhBreadcrumb>
    <LhBreadcrumb separator="/">
      <LhBreadcrumbItem>홈</LhBreadcrumbItem>
      <LhBreadcrumbItem :to="'#'" replace>산수 권</LhBreadcrumbItem>
      <LhBreadcrumbItem>현재 페이지</LhBreadcrumbItem>
    </LhBreadcrumb>
    <p class="demo-note">maxItems로 긴 경로 접기 (첫 항목 + 말줄임 + 마지막 항목)</p>
    <LhBreadcrumb :max-items="3">
      <LhBreadcrumbItem>홈</LhBreadcrumbItem>
      <LhBreadcrumbItem>소장</LhBreadcrumbItem>
      <LhBreadcrumbItem>송나라</LhBreadcrumbItem>
      <LhBreadcrumbItem>범관</LhBreadcrumbItem>
      <LhBreadcrumbItem>계산행려도</LhBreadcrumbItem>
    </LhBreadcrumb>
  </div>
</template>

Breadcrumb Props

프로퍼티	설명	타입	기본값
separator	구분 기호 문자	string	—
maxItems	최대 표시 항목 수 (첫 항목 + 말줄임 + 마지막 몇 항목). 초과하면 접히며, 0 또는 미전달 시 접지 않음	number	—
sx	sx 레이아웃 단축 프로퍼티	—	—

BreadcrumbItem Props

프로퍼티	설명	타입	기본값
to	이동 주소. 존재하고 마지막 항목이 아니면 링크로 렌더링 (vue-router 감지 시 라우터 이동, 그렇지 않으면 기본 내비게이션)	string	—
replace	vue-router 이동 시 replace 방식 사용 여부 (라우터가 없을 때는 효과 없음)	boolean	false

Slots

슬롯	설명
BreadcrumbItem default	항목 텍스트
BreadcrumbItem separator	단일 항목 구분 기호 (부모 separator보다 우선)