@react-aria/breadcrumbs

What is @react-aria/breadcrumbs?

@react-aria/breadcrumbs is a React library that provides accessible breadcrumb navigation components. It is part of the React Aria collection, which focuses on providing accessible UI components that adhere to WAI-ARIA standards.

What are @react-aria/breadcrumbs's main functionalities?

Basic Breadcrumbs

This feature allows you to create a basic breadcrumb navigation component. Each `Item` represents a breadcrumb link.

import { Breadcrumbs, Item } from '@react-aria/breadcrumbs';

function BreadcrumbExample() {
  return (
    <Breadcrumbs>
      <Item key="home">Home</Item>
      <Item key="about">About</Item>
      <Item key="contact">Contact</Item>
    </Breadcrumbs>
  );
}

Custom Separator

This feature allows you to customize the separator between breadcrumb items. In this example, the separator is set to '>'.

import { Breadcrumbs, Item } from '@react-aria/breadcrumbs';

function CustomSeparatorExample() {
  return (
    <Breadcrumbs separator=">">
      <Item key="home">Home</Item>
      <Item key="about">About</Item>
      <Item key="contact">Contact</Item>
    </Breadcrumbs>
  );
}

Breadcrumbs with Icons

This feature allows you to include icons in your breadcrumb items. Each `Item` can contain both an icon and text.

import { Breadcrumbs, Item } from '@react-aria/breadcrumbs';
import { HomeIcon, InfoIcon, ContactIcon } from './icons';

function BreadcrumbsWithIcons() {
  return (
    <Breadcrumbs>
      <Item key="home"><HomeIcon /> Home</Item>
      <Item key="about"><InfoIcon /> About</Item>
      <Item key="contact"><ContactIcon /> Contact</Item>
    </Breadcrumbs>
  );
}

Other packages similar to @react-aria/breadcrumbs

react-breadcrumbs-dynamic

react-breadcrumbs-dynamic is a flexible and customizable breadcrumb component for React. It allows for dynamic generation of breadcrumbs based on the current route. Compared to @react-aria/breadcrumbs, it offers more flexibility in terms of dynamic breadcrumb generation but may require additional effort to ensure accessibility.

react-router-breadcrumbs-hoc

react-router-breadcrumbs-hoc is a higher-order component for generating breadcrumbs based on React Router routes. It is specifically designed to work with React Router, making it a good choice for applications that use React Router for navigation. However, it may not provide the same level of accessibility out-of-the-box as @react-aria/breadcrumbs.

react-breadcrumbs

react-breadcrumbs is a simple and lightweight breadcrumb component for React. It is easy to use and integrates well with React Router. While it is straightforward to implement, it may lack some of the advanced accessibility features provided by @react-aria/breadcrumbs.

README

@react-aria/breadcrumbs

This package is part of react-spectrum. See the repo for more details.