Breadcrumbs

현재 페이지 위에 있는 페이지들의 경로입니다. Breadcrumbs.Root는 순서 있는 목록을 감싼 nav 랜드마크이고, 각 Breadcrumbs.Item은 목록 항목입니다. 각 항목에는 a나 라우터의 링크 같은 링크를 넣고, 마지막 항목에는 일반 텍스트를 넣어 current로 표시하세요. 그러면 그 텍스트가 aria-current="page"가 있는 span으로 감싸집니다.

<Breadcrumbs.Root>
  <Breadcrumbs.Item>
    <YourLink to="/">Home</YourLink>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <YourLink to="/settings">Settings</YourLink>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item current>Billing</Breadcrumbs.Item>
</Breadcrumbs.Root>

Server Components는 @tounsoo/todae/breadcrumbs에서 가져올 수 있습니다. 이 엔트리에는 'use client'도 훅도 없습니다. 메인 @tounsoo/todae 엔트리는 클라이언트 모듈입니다.

랜드마크의 이름은 비어 있지 않은 aria-label이나 aria-labelledby를 주지 않으면 "Breadcrumb"입니다. 이 기본값은 StringsProvider의 breadcrumbs 문자열이며, 설정하지 않으면 영어이고, @tounsoo/todae/breadcrumbs 서버 진입점에서는 항상 영어입니다. 항목 사이에는 구분 기호가 그려지며, separator를 주지 않으면 /이고, 스크린 리더는 이를 건너뜁니다. 항목이 한 줄에 들어가지 않으면 여러 줄로 넘어갑니다.

언제 쓰나

쓸 때: 계층 깊은 곳의 페이지에서 사람들이 현재 위치를 보고 위로 이동해야 할 때.

쓰지 않을 때: 사용자가 순서대로 거치는 흐름의 단계 → 스테퍼. 한 페이지의 섹션 → Tabs. 사이트의 주 내비게이션 → 직접 만든 nav.

Props

Breadcrumbs.Root props
이름	타입	필수	기본값	설명
aria-label	`string`	아니요	"Breadcrumb"	랜드마크 이름. 기본값은 StringsProvider의 breadcrumbs 문자열입니다. 서버 엔트리는 항상 영어를 씁니다.
aria-labelledby	`string`	아니요	—	랜드마크의 이름이 되는 요소의 id. 이 값을 주면 기본 이름은 쓰지 않습니다.
separator	`string`	아니요	"/"	항목 사이에 그려지는 텍스트. 스크린 리더는 건너뜁니다.
children	`React.ReactNode`	아니요	—	맨 위 페이지부터 현재 페이지까지의 Breadcrumbs.Item 요소.

Breadcrumbs.Item props
이름	타입	필수	기본값	설명
current	`boolean`	아니요	false	텍스트를 aria-current="page"가 있는 span으로 감싸 현재 페이지를 표시합니다. 링크가 아닌 일반 텍스트를 넣으세요.
children	`React.ReactNode`	아니요	—	a 요소나 라우터의 링크 같은 페이지 링크.