Breadcrumb
사용자가 현재 페이지의 위치를 파악하고 이전 페이지로 쉽게 이동할 수 있도록 도와주는 네비게이션 컴포넌트입니다.Examples
With Ellipsis
긴 네비게이션 경로에서 중간 단계를 생략 표시로 나타낸 패턴입니다.
Composition Pattern
Breadcrumb 컴포넌트의 다양한 구성 패턴입니다.
Property
Current
현재 페이지를 나타내는 링크의 상태를 설정할 수 있습니다.
Size
Breadcrumb의 크기를 설정합니다.
Props Table
Breadcrumb.Root
Breadcrumb.RootPrimitive와 Breadcrumb.ListPrimitive를 하나의 파트로 합쳐, 현재 페이지가 사이트 계층에서 어디에 있는지 보여주는 Breadcrumb 경로의 루트를 만듭니다. <nav> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
size? | md | smmdlgxl |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Breadcrumb.RootPrimitive
"Breadcrumb" 레이블이 붙은 내비게이션 랜드마크. Breadcrumb 경로를 담고, 내부의 링크, 구분자, 생략 아이콘과 크기를 공유합니다. <nav> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
size? | md | smmdlgxl |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Breadcrumb.ListPrimitive
Breadcrumb 항목을 한 줄로 배치하는 순서 있는 목록. <ol> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Breadcrumb.Item
Breadcrumb.ItemPrimitive와 Breadcrumb.LinkPrimitive를 하나의 파트로 합쳐, Breadcrumb 경로의 링크 항목 하나를 만듭니다. <li> 요소 안에 <a> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
current? | false | boolean |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Breadcrumb.ItemPrimitive
링크나 생략 표시처럼 Breadcrumb 경로의 항목 하나를 담는 목록 항목. <li> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Breadcrumb.LinkPrimitive
Breadcrumb 경로에 있는 페이지로 연결되는 링크. 사용자가 있는 페이지의 링크에는 current를 설정하세요. <a> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
current? | false | boolean |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Breadcrumb.Separator
Breadcrumb 항목 사이에 놓이는 아이콘. 기본값은 슬래시이며 보조기술에는 숨겨집니다. <li> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Breadcrumb.Ellipsis
Breadcrumb.ItemPrimitive와 Breadcrumb.EllipsisPrimitive를 하나의 파트로 합쳐, 접힌 항목을 대신하는 항목을 만듭니다. <li> 요소 안에 <span> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Breadcrumb.EllipsisPrimitive
Breadcrumb 경로에서 접힌 항목을 대신하는 아이콘. 보조기술에는 숨겨집니다. <span> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |