Breadcrumb 빵조각 내비게이션

현재 페이지가 계층 구조에서 어디에 있는지 표시하며, 한 단계씩 위로 이동할 수 있습니다.

기본 사용법

기본 사용법

import { LhBreadcrumb, LhBreadcrumbItem } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhBreadcrumb>
      <LhBreadcrumbItem to="/">홈</LhBreadcrumbItem>
      <LhBreadcrumbItem to="/components">컴포넌트</LhBreadcrumbItem>
      <LhBreadcrumbItem>빵조각 내비게이션</LhBreadcrumbItem>
    </LhBreadcrumb>
  )
}

Breadcrumb Props

프로퍼티	설명	타입	선택 가능한 값	기본값
separator	구분자 문자	string	—	'/'
maxItems	최대 표시 항목 수, 초과하면 「첫 항목 + 말줄임 + 마지막 항목」으로 접힘	number	—	0 (접지 않음)
sx	빠른 레이아웃 프로퍼티	SxProps	—	—

BreadcrumbItem Props

프로퍼티	설명	타입	기본값
to	이동 주소. 값이 있고 마지막 항목이 아닐 때 링크로 렌더링	string	—
replace	plus API 호환을 위해 유지. React 측 기본 <a> 이동은 이 스위치의 영향을 받지 않음	boolean	false
children	문구	ReactNode	—

제어 / 비제어

접힘 상태는 컴포넌트 내부 상태입니다. 말줄임 버튼을 클릭하면 전체가 펼쳐지며 외부 개입이 필요 없습니다. maxItems에 0을 전달하거나 전달하지 않으면 접지 않습니다.

자식 노드 제한

children은 직접 LhBreadcrumbItem이어야 합니다 (.map으로 렌더링 가능). 커스텀 컴포넌트로 감싸면 안 됩니다. 부모 컴포넌트는 Children.toArray로 자식 요소 타입을 걸러 인덱스를 주입하므로, 감싸면 인덱스 주입이 실패합니다. lh-ui-plus의 collectPaneVnodes 하향 제한과 동일합니다.

라우터 연동

React 생태계에는 전역 라우터가 없어, 링크는 기본 <a>로 렌더링되어 직접 이동합니다. React Router를 연동할 때는 onClick으로 가로채 navigate를 호출하거나, 직접 <Link>를 렌더링해 to를 대신하세요.

접근성

루트 요소는 <nav aria-label>이고 리스트는 <ol>입니다. 마지막 항목은 aria-current="page"를 출력하고, 말줄임 버튼에는 aria-label이 있습니다 (언어 팩 breadcrumb.more).

ref

forwardRef<HTMLElement> —— <nav> 루트 요소. LhBreadcrumbItem은 HTMLLIElement를 전달합니다.

스타일

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/breadcrumb'