브레드크럼 Breadcrumb

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

기본

<nav>에 krdsBreadcrumb를 붙이고 items로 경로를 줍니다. 첫 항목은 홈 아이콘과 함께 표시되고(showHomeIcon), 마지막 항목은 현재 페이지(aria-current="page")로 표시됩니다. 내비게이션 이름은 label(기본 '현재 경로')로 바꿉니다.

항목을 누르면 (itemClick)으로 항목과 클릭 이벤트를 보냅니다. 라우터로 이동하려면 event.preventDefault()로 기본 이동을 막고 라우터로 옮깁니다.

import { Component } from '@angular/core'
import { KrdsBreadcrumb, type KrdsBreadcrumbItem } from '@krds.ui/angular'

@Component({
  selector: 'demo-breadcrumb-basic',
  imports: [KrdsBreadcrumb],
  template: '<nav krdsBreadcrumb [items]="items" (itemClick)="$event.event.preventDefault()"></nav>'
})
export default class BreadcrumbBasic {
  readonly items: KrdsBreadcrumbItem[] = [{ text: '홈', href: '#' }, { text: '서비스 신청', href: '#' }, { text: '서비스 신청2' }]
}

KrdsBreadcrumb

선택자 nav[krdsBreadcrumb]

Inputs

이름	타입	기본값	설명
`items` (필수)	`KrdsBreadcrumbItem[]`	-	항목 (마지막이 현재 페이지)
`label`	`string`	`'현재 경로'`	내비게이션 이름
`showHomeIcon`	`boolean`	`true`	첫 항목을 홈 아이콘으로

Outputs

이름	값	설명
`itemClick`	`KrdsBreadcrumbClick`	항목을 클릭했을 때

타입

/** 브레드크럼 항목 */
export interface KrdsBreadcrumbItem {
  /** 문구 */
  text: string
  /** 링크 주소 */
  href?: string
}

/** 브레드크럼 항목 클릭 이벤트 (라우터로 이동하려면 event.preventDefault()) */
export interface KrdsBreadcrumbClick {
  item: KrdsBreadcrumbItem
  event: MouseEvent
}

브레드크럼 Breadcrumb ​

기본 ​

KrdsBreadcrumb ​

Inputs

Outputs

타입

브레드크럼 Breadcrumb

기본

KrdsBreadcrumb