Breadcrumb

Breadcrumbs is a navigation pattern that helps users understand the hierarchy of a website.

RecastUI provides 4 components for implementing breadcrumbs navigation:

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

Import

import {
	Breadcrumb,
	BreadcrumbItem,
	BreadcrumbLink,
	BreadcrumbSeparator
} from "@recastui/react";

Usage

Add isCurrentPage 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

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href='#'>Home</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem>
    <BreadcrumbLink href='#'>Docs</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href='#'>Breadcrumb</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Separators

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

Editable Example

<Breadcrumb separator='-'>
  <BreadcrumbItem>
    <BreadcrumbLink href='#'>Home</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem>
    <BreadcrumbLink href='#'>About</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href='#'>Contact</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Using an icon as the separator

Editable Example

<Breadcrumb separator={<IconChevronRight width={14} height={14} />}>
  <BreadcrumbItem>
    <BreadcrumbLink href='#'>Home</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem>
    <BreadcrumbLink href='#'>About</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href='#'>Contact</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Props

Prop	Type	Description
className	string (optional)	Additional CSS classes to apply to the component.
children	React.ReactNode	The children of the Breadcrumb component.
separator	React.ReactNode (optional)	The visual separator between each breadcrumb item. Default is ’/‘.

BreadcrumbItem

Prop	Type	Description
isCurrentPage	boolean (optional)	If true, the BreadcrumbLink renders a span with aria-current set to ‘page’.
className	string (optional)	Additional CSS classes to apply to the component.
children	React.ReactNode	The children of the BreadcrumbItem component.
separator	React.ReactNode (optional)	The visual separator between each breadcrumb item. Pass from Breadcrumb.
isLastChild	boolean (optional)	If true, the BreadcrumbSeparator is not rendered.

BreadcrumbLink

Prop	Type	Description
as	React.ElementType (optional)	The element type to render as, useful when using a routing library. Default is ‘a’.
className	string (optional)	Additional CSS classes to apply to the component.
isCurrentPage	boolean (optional)	If true, the BreadcrumbLink renders a span with aria-current set to ‘page’.
children	React.ReactNode	The children of the BreadcrumbLink component.

BreadcrumbSeparator

Prop	Type	Description
className	string (optional)	Additional CSS classes to apply to the component.
children	React.ReactNode	The children of the BreadcrumbSeparator component, usually the separator character.

Accessibility

The Breadcrumb components have been designed with accessibility in mind, following best practices to ensure they are usable by a wide range of users.

Landmark and ARIA attributes

The Breadcrumbs are rendered in a nav element to denote that it is a navigation landmark.
The Breadcrumb nav has aria-label set to ‘breadcrumb’ to provide a label for assistive technologies.
The BreadcrumbItem with isCurrentPage prop adds the aria-current="page" attribute to the BreadcrumbLink, indicating that it represents the current page.

The BreadcrumbLink components are focusable, allowing keyboard users to navigate through the breadcrumb links.
The BreadcrumbSeparator has role="presentation" set to denote that it is for presentation purposes only and should not be announced by screen readers.

By following these accessibility best practices, the Breadcrumb components ensure a more inclusive user experience.

Breadcrumb

Import

Usage

Separators

Using an icon as the separator

Props

Breadcrumb

BreadcrumbItem

BreadcrumbLink

BreadcrumbSeparator

Accessibility

Landmark and ARIA attributes

Focus and Keyboard Navigation