KRDS Vue

브레드크럼 Breadcrumb ​

브레드크럼은 탐색 계층 구조를 표시하여 사용자가 현재 위치를 파악하고 계층 구조의 수준을 이동할 수 있게 해준다. 브레드크럼을 통해 사용자는 탐색 중인 화면의 상위 수준 화면으로 이동할 수 있다.

KRDS 가이드

기본 ​

items의 첫 항목은 홈 아이콘과 함께 표시되고(showHomeIcon), 마지막 항목은 현재 페이지(aria-current="page")로 표시됩니다.

vue
<script setup lang="ts">
  import { KrdsBreadcrumb, type BreadcrumbItem } from '@krds.ui/vue'

  const items: BreadcrumbItem[] = [
    { text: '홈', href: '#', onClick: e => e.preventDefault() },
    { text: '서비스 신청', href: '#', onClick: e => e.preventDefault() },
    { text: '서비스 신청2' }
  ]
</script>

<template>
  <KrdsBreadcrumb :items="items" />
</template>

KrdsBreadcrumb ​

Props

이름타입기본값설명
idstring-엘리먼트 ID
ariaLabelstring'현재 경로'접근성 라벨
showHomeIconbooleantrue홈 아이콘 표시 여부
items (필수)BreadcrumbItem[]-브레드크럼 아이템 배열

Events

이름인자설명
item-click[item: BreadcrumbItem, event: MouseEvent]경로 항목을 클릭했을 때