브레드크럼

브레드크럼을 통해 사용자는 탐색 중인 화면의 상위 수준 화면으로 이동할 수 있다.

브레드크럼을 통해 사용자는 탐색 중인 화면의 상위 수준 화면으로 이동할 수 있다.

사용 지침

본문 시작 바로 위에 두어 상위 단계로 빠르게 돌아갈 수 있게 하며, 검색·딥링크로 진입한 사용자가 사이트 구조를 빠르게 파악할 수 있도록 도와줍니다.

예제

Default

examples/breadcrumb/BreadcrumbDefault.tsx
import {
  Breadcrumb,
  BreadcrumbHome,

Single Item

examples/breadcrumb/BreadcrumbSingleItem.tsx
import { Breadcrumb, BreadcrumbHome, BreadcrumbItem, BreadcrumbList } from "@/components/ui/dynamic/breadcrumb"

export default function BreadcrumbSingleItem() {

With Disabled Item

examples/breadcrumb/BreadcrumbWithDisabledItem.tsx
import {
  Breadcrumb,
  BreadcrumbHome,

속성

이름타입기본값설명
aria-labelstring현재 경로—
classNamestring——