Nebula

breadcrumb

Import

import { Breadcrumb, BreadcrumbItem } from '@xpanseinc/nebula'

Usage

Add isCurrentPage to the BreadcrumbItem that matches the current path. The BreadcrumbItem renders a span with aria-current set to page instead of an anchor element.

<Breadcrumb>
  <BreadcrumbItem href="#">
    Order
  </BreadcrumbItem>

  <BreadcrumbItem href="#">
    Order Details
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    Update Order
  </BreadcrumbItem>
</Breadcrumb>

Collapsed Breadcrumbs

By default, when there are more than 3 breadcumbs, the first and last will be shown with an ellipsis in between. This can be modified by setting maxItems.

<Breadcrumb maxItems={2}>
  <BreadcrumbItem href="#">
    Order
  </BreadcrumbItem>

  <BreadcrumbItem href="#">
    Order Details
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    Update Order
  </BreadcrumbItem>
</Breadcrumb>

Usage with React Router

Pass the as prop to the BreadcrumbItem component. It will replace the anchor tag with the Router Link.

<Breadcrumb>
  <BreadcrumbItem as={Link} to="#">
    Order
  </BreadcrumbItem>

  <BreadcrumbItem as={Link} to="#">
    Order Details
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    Update Order
  </BreadcrumbItem>
</Breadcrumb>