Color Schemes for Breadcrumb
are not implemented in the default theme. You can extend the theme to implement them.
Breadcrumb
Breadcrumbs is a navigation pattern that helps users understand the hierarchy of a website.
Props#
Breadcrumb Props#
colorScheme
colorScheme
string
listProps
listProps
HTMLChakraProps<"ol">
separator
separator
The visual separator between each breadcrumb item
string | React.ReactElement
"/"
size
size
Sizes for Breadcrumb
are not implemented in the default theme. You can extend the theme to implement them.
string
spacing
spacing
The left and right margin applied to the separator
SystemStyleObject["mx"]
"0.5rem"
variant
variant
Variants for Breadcrumb
are not implemented in the default theme. You can extend the theme to implement them.
string
BreadcrumbItem Props#
isCurrentPage
isCurrentPage
boolean
isLastChild
isLastChild
boolean
separator
separator
The visual separator between each breadcrumb item
string | React.ReactElement
"/"
spacing
spacing
The left and right margin applied to the separator
SystemStyleObject["mx"]
"0.5rem"
BreadcrumbLink Props#
The BreadcrumbLink composes the Link component so you can use all Link props.
isCurrentPage
isCurrentPage
boolean
BreadcrumbSeparator Props#
The BreadcrumbSeparator composes the Box component so you can use all Box props.
Props#
Breadcrumb Props#
colorScheme
colorScheme
Color Schemes for Breadcrumb
are not implemented in the default theme. You can extend the theme to implement them.
string
listProps
listProps
HTMLChakraProps<"ol">
separator
separator
The visual separator between each breadcrumb item
string | React.ReactElement
"/"
size
size
Sizes for Breadcrumb
are not implemented in the default theme. You can extend the theme to implement them.
string
spacing
spacing
The left and right margin applied to the separator
SystemStyleObject["mx"]
"0.5rem"
variant
variant
Variants for Breadcrumb
are not implemented in the default theme. You can extend the theme to implement them.
string
BreadcrumbItem Props#
isCurrentPage
isCurrentPage
boolean
isLastChild
isLastChild
boolean
separator
separator
The visual separator between each breadcrumb item
string | React.ReactElement
"/"
spacing
spacing
The left and right margin applied to the separator
SystemStyleObject["mx"]
"0.5rem"
BreadcrumbLink Props#
The BreadcrumbLink composes the Link component so you can use all Link props.
isCurrentPage
isCurrentPage
boolean
BreadcrumbSeparator Props#
The BreadcrumbSeparator composes the Box component so you can use all Box props.