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

Accessibility

When breadcrumbs are used as a main navigation element for a page, they can be placed in a navigation landmark. Landmarks help assistive technology users quickly find major sections of a page. Place breadcrumbs inside a <nav> element with an aria-label to create a navigation landmark.

API

<Breadcrumbs>
  <Breadcrumb>
    <Link />
  </Breadcrumb>
</Breadcrumbs>

Breadcrumbs

Name	Type
`isDisabled`	`boolean`
Whether the breadcrumbs are disabled.

`children`	`ReactNode \| (item: T) => ReactNode`
The contents of the collection.
`items`	`Iterable<T>`
Item objects in the collection.
`dependencies`	`ReadonlyArray<any>`
Values that should invalidate the item cache when using dynamic collections.

Default className: react-aria-Breadcrumbs

Name	Type
`id`	`Key`
A unique id for the breadcrumb, which will be passed to `onAction` when the breadcrumb is pressed.
`children`	`ChildrenOrFunction<BreadcrumbRenderProps>`
The children of the component. A function may be provided to alter the children based on component state.

Default className: react-aria-Breadcrumb

Render Prop	CSS Selector
`isCurrent`	CSS Selector: `[data-current]`
Whether the breadcrumb is for the current page.
`isDisabled`	CSS Selector: `[data-disabled]`
Whether the breadcrumb is disabled.

useBreadcrumbs

Breadcrumbs

Content

Accessibility

API

Breadcrumbs

Breadcrumb

Related pages