Breadcrumbs

Breadcrumbs display a hierarchy of links to the current page or resource in an application.

Theme

isDisabled

Example

Breadcrumbs.tsx

Breadcrumbs.css

Example

Breadcrumbs.tsx

Breadcrumbs.css

import {Breadcrumbs, Breadcrumb} from './Breadcrumbs';

<Breadcrumbs>
  <Breadcrumb href="/">Home</Breadcrumb>
  <Breadcrumb href="/react-aria/">React Aria</Breadcrumb>
  <Breadcrumb>Breadcrumbs</Breadcrumb>
</Breadcrumbs>

Content

Breadcrumbs follows the Collection Components API, accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the items prop, and a function to render the children. The onAction event is called when a user presses a breadcrumb.

import type {Key} from 'react-aria-components';
import {Breadcrumbs, Breadcrumb} from './Breadcrumbs';
import {useState} from 'react';

function Example() {
  let [breadcrumbs, setBreadcrumbs] = useState([
    {id: 1, label: 'Home'},
    {id: 2, label: 'Trendy'},
    {id: 3, label: 'March 2022 Assets'}
  ]);

  let navigate = (id: Key) => {
    let i = breadcrumbs.findIndex(item => item.id === id);
    setBreadcrumbs(breadcrumbs.slice(0, i + 1));
  };

  return (
    <Breadcrumbs items={breadcrumbs} onAction={navigate}>
      {item => <Breadcrumb>{item.label}</Breadcrumb>}
    </Breadcrumbs>
  );
}