@react-aria/breadcrumbs

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>
  );
}