HTMLChakraProps<"ol">Breadcrumb
Breadcrumbs is a navigation pattern that helps users understand the hierarchy of a website.
Props#
Breadcrumb.Root Props#
listProps
listPropsType
separator
separatorDescription
The visual separator between each breadcrumb item
Type
type ONLY_FOR_FORMAT =
| string
| ReactElement<any, string | JSXElementConstructor<any>>Default
/spacing
spacingDescription
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.5remBreadcrumb.Item Props#
isCurrentPage
isCurrentPageType
booleanDefault
falseisLastChild
isLastChildType
booleanDefault
falseseparator
separatorDescription
The visual separator between each breadcrumb item
Type
type ONLY_FOR_FORMAT =
| string
| ReactElement<any, string | JSXElementConstructor<any>>Default
/spacing
spacingDescription
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.5remBreadcrumb.Link Props#
The Breadcrumb.Link composes the Link component so you can use all Link props.
isCurrentPage
isCurrentPageType
booleanDefault
falseBreadcrumb.Separator Props#
The Breadcrumb.Separator composes the Box component so you can use all Box props.
Props#
Breadcrumb.Root Props#
listProps
listPropsType
HTMLChakraProps<"ol">separator
separatorDescription
The visual separator between each breadcrumb item
Type
type ONLY_FOR_FORMAT =
| string
| ReactElement<any, string | JSXElementConstructor<any>>Default
/spacing
spacingDescription
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.5remBreadcrumb.Item Props#
isCurrentPage
isCurrentPageType
booleanDefault
falseisLastChild
isLastChildType
booleanDefault
falseseparator
separatorDescription
The visual separator between each breadcrumb item
Type
type ONLY_FOR_FORMAT =
| string
| ReactElement<any, string | JSXElementConstructor<any>>Default
/spacing
spacingDescription
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.5remBreadcrumb.Link Props#
The Breadcrumb.Link composes the Link component so you can use all Link props.
isCurrentPage
isCurrentPageType
booleanDefault
falseBreadcrumb.Separator Props#
The Breadcrumb.Separator composes the Box component so you can use all Box props.