Breadcrumb

Breadcrumb shows the user’s current location within a navigational hierarchy, providing links to parent pages. Use on pages more than one level deep.

Basic usage

Code

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>

    <BreadcrumbSeparator />

    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>

    <BreadcrumbSeparator />

    <BreadcrumbItem>
      <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
    </BreadcrumbItem>

    <BreadcrumbSeparator />

    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Custom links and separators

Code

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink render={<a href="/accounts" />}>Accounts</BreadcrumbLink>
    </BreadcrumbItem>

    <BreadcrumbSeparator>/</BreadcrumbSeparator>

    <BreadcrumbItem>
      <BreadcrumbPage>Green Valley Farm</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API

Breadcrumb

No documented props

BreadcrumbEllipsis

No documented props

BreadcrumbItem

No documented props

BreadcrumbLink

Name	Type/Description
ref	((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

BreadcrumbList

No documented props

BreadcrumbPage

No documented props

BreadcrumbSeparator

No documented props