Breadcrumbs, or a breadcrumb navigation, can help enhance how users navigate to previous page levels of a website, especially if that website has many pages or products.


Nature UI exports 3 breadcrumb-related components:

  • Breadcrumb: The parent container for breadcrumbs.
  • BreadcrumbItem: Individual breadcrumb element containing a link and a divider.
  • BreadcrumbLink: The breadcrumb link.
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@nature-ui/core';


Add isCurrent prop to the BreadcrumbItem that matches the current path. When this prop is present, the BreadcrumbLink renders a span with aria-current set to page instead of an anchor element.

Editable Example


Change the separator used in the breadcrumb by passing a string, like - or an icon.

Editable Example

Using an icon as the separator#

Editable Example

Usage with Routing Library#

To use the Breadcrumb with a routing Library like Reach Router or React Router, all you need to do is to pass the as prop to the BreadcrumbLink component.

It'll replace the rendered a tag with Reach's Link.

// import { Link } from "@reach/router"
<BreadcrumbLink as={Link} to='#'>
<BreadcrumbLink as={Link} to='#'>
<BreadcrumbItem isCurrent>


  • The Breadcrumbs are rendered in a nav to denote that it is a navigation landmark.
  • The Breadcrumb nav has aria-label set to breadcrumb.
  • The BreadcrumbItem with isCurrentPage prop adds the aria-current=page to the BreadcrumbLink.
  • The separator has role set to presentation to denote that its for presentation purposes.


separatorstring, React.ReactNode/The visual separator between the breadcrumb item.
spacingcss.margin0.5remThe left and right margin applied to the separator.
isCurrentbooleanIf true, it indicates that the breadcrumb link is active page, adds aria-current=page and renders a span

The BreadcrumbLink composes the HTML anchor (a) tag.