Breadcrumb
사용자가 현재 페이지의 위치를 파악하고 이전 페이지로 쉽게 이동할 수 있도록 도와주는 네비게이션 컴포넌트입니다.Examples
With Ellipsis
긴 네비게이션 경로에서 중간 단계를 생략 표시로 나타낸 패턴입니다.
Composition Pattern
Breadcrumb 컴포넌트의 다양한 구성 패턴입니다.
Property
Current
현재 페이지를 나타내는 링크의 상태를 설정할 수 있습니다.
Size
Breadcrumb의 크기를 설정합니다.
Props Table
Breadcrumb.Root
Combines Breadcrumb.RootPrimitive and Breadcrumb.ListPrimitive into a single part, the root of a breadcrumb trail that shows where the current page sits in the site hierarchy. Renders a <nav> element.
| Prop | Default | Type |
|---|---|---|
size? | md | smmdlgxl |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Breadcrumb.RootPrimitive
Navigation landmark labeled "Breadcrumb" that holds the breadcrumb trail and shares its size with the links, separators, and ellipsis inside it. Renders a <nav> element.
| Prop | Default | Type |
|---|---|---|
size? | md | smmdlgxl |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Breadcrumb.ListPrimitive
Ordered list that lays out the breadcrumb items in a row. Renders an <ol> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Breadcrumb.Item
Combines Breadcrumb.ItemPrimitive and Breadcrumb.LinkPrimitive into a single part, one linked entry of the breadcrumb trail. Renders an <a> element inside an <li> element.
| Prop | Default | Type |
|---|---|---|
current? | false | boolean |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Breadcrumb.ItemPrimitive
List item that holds one entry of the breadcrumb trail, such as a link or an ellipsis. Renders an <li> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Breadcrumb.LinkPrimitive
Link to a page in the breadcrumb trail. Set current on the link for the page the user is on. Renders an <a> element.
| Prop | Default | Type |
|---|---|---|
current? | false | boolean |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Breadcrumb.Separator
Icon placed between breadcrumb items, a slash by default, hidden from assistive technologies. Renders an <li> element.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Breadcrumb.Ellipsis
Combines Breadcrumb.ItemPrimitive and Breadcrumb.EllipsisPrimitive into a single part, an entry that stands in for collapsed items. Renders a <span> element inside an <li> element.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Breadcrumb.EllipsisPrimitive
Icon that stands in for collapsed items in the breadcrumb trail, hidden from assistive technologies. Renders a <span> element.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |