Breadcrumb

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.

Import#

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';

Usage#

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

Separators#

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"
<Breadcrumb>
<BreadcrumbItem>
<BreadcrumbLink as={Link} to='#'>
Home
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem>
<BreadcrumbLink as={Link} to='#'>
About
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem isCurrent>
<BreadcrumbLink>Contact</BreadcrumbLink>
</BreadcrumbItem>
</Breadcrumb>

Accessibility#

  • 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.

Props#

NameTypeDefaultDescription
separatorstring, React.ReactNode/The visual separator between the breadcrumb item.
spacingcss.margin0.5remThe left and right margin applied to the separator.
NameTypeDefaultDescription
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.