Breadcrumbs
Breadcrumbs are useful to orient the user on your site, especially when working with hierarchies of content.
Sancho exports two components to create breadcrumbs:
- Breadcrumbs: The container for wrapping a list of BreadcrumbItem children.
- BreadcrumbItem: Each item in a list of breadcrumbs.
Basic usage
<Breadcrumbs> <BreadcrumbItem> <Link href="#">Watershed</Link> </BreadcrumbItem> <BreadcrumbItem> <Link href="#">Visual Teaching Strategies</Link> </BreadcrumbItem> <BreadcrumbItem>Settings</BreadcrumbItem> </Breadcrumbs>
Large sizing
<Breadcrumbs size="lg"> <BreadcrumbItem> <Link href="#">Watershed</Link> </BreadcrumbItem> <BreadcrumbItem> <Link href="#">Visual Teaching Strategies</Link> </BreadcrumbItem> <BreadcrumbItem>Settings</BreadcrumbItem> </Breadcrumbs>
Show Code
Overflow mode
When you set a overflowX
prop, the container will scroll horizontally instead of attempting to fit all breadcrumbs into the container. This is particularly useful on mobile devices with limited horizontal width.
<div style={{ width: "300px" }}> <Breadcrumbs overflowX> <BreadcrumbItem> <Link href="#">Watershed</Link> </BreadcrumbItem> <BreadcrumbItem> <Link href="#">Visual Teaching Strategies</Link> </BreadcrumbItem> <BreadcrumbItem> <Link href="#">Some other thing</Link> </BreadcrumbItem> <BreadcrumbItem>Settings</BreadcrumbItem> </Breadcrumbs> </div>
Show Code
API
Breadcrumbs
size"md" | "lg"
children*ReactElement<BreadcrumbItemProps, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> | ... 14 more ... | (ReactElement<...>[] & ReactPortal)
A list of BreadcrumbItem children
overflowXnumber
cssInterpolationWithTheme<any>
BreadcrumbItem
invertedboolean
size"md" | "lg"
cssInterpolationWithTheme<any>