Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

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>

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>

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
BreadcrumbItem
invertedboolean
size"md" | "lg"