Breadcrumb

@hua-labs/ui

v1.1.0

계층적 페이지 경로를 표시하고 상위 페이지로 이동할 수 있는 네비게이션 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Breadcrumb, BreadcrumbItem } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 스타일

Subtle 변형

Glass 변형 (배경 위)

홈 아이콘 포함

커스텀 구분자

items prop 사용

Props

이름	타입	기본값	설명
`items`	`BreadcrumbItemData[]`	-	Breadcrumb 항목 배열 (children 대신 사용 가능)
`children`	`React.ReactNode`	-	BreadcrumbItem 컴포넌트들
`variant`	`"default" \| "subtle" \| "transparent" \| "glass"`	`"default"`	Breadcrumb 스타일 변형
`separator`	`React.ReactNode`	`chevronRight icon`	항목 사이 구분자
`maxItems`	`number`	-	최대 표시 항목 수 (초과 시 ... 처리)
`showHomeIcon`	`boolean`	`false`	시작 부분에 홈 아이콘 표시
`homeLabel`	`string`	-	Label for home icon (when showHomeIcon is true)

코드 예시

기본 사용법tsx

1import { Breadcrumb, BreadcrumbItem } from '@hua-labs/ui/navigation';
2 
3<Breadcrumb>
4  <BreadcrumbItem href="/">Home</BreadcrumbItem>
5  <BreadcrumbItem href="/products">Products</BreadcrumbItem>
6  <BreadcrumbItem isCurrent>Detail</BreadcrumbItem>
7</Breadcrumb>

items prop 사용tsx

1<Breadcrumb
2  items={[
3    { label: "Home", href: "/" },
4    { label: "Products", href: "/products" },
5    { label: "Electronics", href: "/products/electronics" },
6    { label: "Laptop" }
7  ]}
8/>

Glass 변형 (배경 위)tsx

1<Breadcrumb variant="glass">
2  <BreadcrumbItem href="/">Home</BreadcrumbItem>
3  <BreadcrumbItem isCurrent>Current Page</BreadcrumbItem>
4</Breadcrumb>

접근성

•역할: 스크린 리더를 위한 aria-label='Breadcrumb' 설정
•현재 페이지: 현재 항목에 aria-current='page' 사용
•시맨틱 역할: 적절한 시맨틱을 위해 nav, ol 요소 사용

Navigation Pagination