Breadcrumb

Breadcrumbs enhance how users navigate to previous page levels.

Use breadcrumbs for nested navigation, with each item acting as a link. They show the hierarchical levels from the highest to lowest.

Import

• Breadcrumb: The parent container for breadcrumbs.
• BreadcrumbItem: Individual breadcrumb element containing a link and a divider.
• BreadcrumbLink: The breadcrumb link, obviously.
• BreadcrumbSeparator: The visual separator between each breadcrumb

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from '@outfitio/outkit';

Usage

Add isCurrentPage prop to the BreadcrumbItem that matches the current path. When this prop is present, the BreadcrumbItem doesn't have a separator, and the BreadcrumbLink has aria-current set to page.

Separators

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

Using an icon as the separator

Styling the Separator

To gain control over the style of the breadcrumb separator. Set addSeparator to false, and manually add the BreadcrumbSeparator as a child of the BreadcrumbItem.

You can then pass the style props to change the styling. You can also override the content of the BreadcrumbSeparator by passing its children.

Composition

Breadcrumb composes Box so you can pass all Box props to change the style of the breadcrumbs. Let's say we need to increase the fontSize of the breadcrumbs.

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 with Reach's Link.

// import { Link } from '@reach/router'

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink as={Link} to="/">
      Home
    </BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink as={Link} to="/about">
      About
    </BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink>Contact</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Accessibility

• The Breadcrumbs are rendered in a nav to denote that it's 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.

Best Practice

• Do not include navigation levels included in the primary site navigation. For example, use "Tags > Queensland", not "Users and Teams > Tags > Queensland"

Props

Breadcrumb Props

BreadcrumbItem Props

BreadcrumbLink Props

The BreadcrumbLink composes the Link component so you can all Link props.

BreadcrumbSeparator Props

The BreadcrumbSeparator composes the Box component so you can all Box props.