HTMLChakraProps<"ol">
Breadcrumb
Breadcrumbs is a navigation pattern that helps users understand the hierarchy of a website.
Props#
Breadcrumb.Root Props#
listProps
listProps
Type
separator
separator
Description
The visual separator between each breadcrumb item
Type
type ONLY_FOR_FORMAT =
| string
| ReactElement<any, string | JSXElementConstructor<any>>
Default
/
spacing
spacing
Description
The left and right margin applied to the separator
Type
string | number | boolean | (string & {}) | ResponsiveArray<string | number | (string & {})> | Partial<Record<string, string | number | (string & {})>> | ResponsiveArray<...> | Partial<...> | ((theme: Record<...>) => ResponsiveValue<...>)
Default
0.5rem
Breadcrumb.Item Props#
isCurrentPage
isCurrentPage
Type
boolean
Default
false
isLastChild
isLastChild
Type
boolean
Default
false
separator
separator
Description
The visual separator between each breadcrumb item
Type
type ONLY_FOR_FORMAT =
| string
| ReactElement<any, string | JSXElementConstructor<any>>
Default
/
spacing
spacing
Description
The left and right margin applied to the separator
Type
string | number | boolean | (string & {}) | ResponsiveArray<string | number | (string & {})> | Partial<Record<string, string | number | (string & {})>> | ResponsiveArray<...> | Partial<...> | ((theme: Record<...>) => ResponsiveValue<...>)
Default
0.5rem
Breadcrumb.Link Props#
The Breadcrumb.Link composes the Link component so you can use all Link props.
isCurrentPage
isCurrentPage
Type
boolean
Default
false
Breadcrumb.Separator Props#
The Breadcrumb.Separator composes the Box component so you can use all Box props.