Breadcrumbs

Breadcrumbs show hierarchy and navigational context for a user's location within an application.

Breadcrumbs

Home
React Spectrum
Breadcrumbs

size

isDisabled

import {Breadcrumbs, Breadcrumb} from '@react-spectrum/s2';

<Breadcrumbs>
  <Breadcrumb href="/">Home</Breadcrumb>
  <Breadcrumb href="/react-spectrum">React Spectrum</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.

Home

Library

Documents

Annual Reports

Home
Library
Documents
Annual Reports

import {Breadcrumbs, Breadcrumb, type Key} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [breadcrumbs, setBreadcrumbs] = useState([
    {id: 1, label: 'Home'},
    {id: 2, label: 'Library'},
    {id: 3, label: 'Documents'},
    {id: 4, label: 'Annual Reports'}
  ]);

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

Overflow Behavior

Breadcrumbs automatically collapse items into a menu when space is limited. A maximum of 4 items are shown including the root and menu button.

Documents

My Shared Folder

Projects and Workflows

Annual Reports 2024

Marketing Materials

Q3 Campaign Assets

Final Deliverables

Documents
My Shared Folder
Projects and Workflows
Annual Reports 2024
Marketing Materials
Q3 Campaign Assets
Final Deliverables

import {Breadcrumbs, Breadcrumb} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<div
  className={style({
    width: 400,
    padding: 16,
    borderWidth: 1,
    borderStyle: 'solid', 
    borderColor: 'gray-300',
    borderRadius: 'default',
    resize: 'horizontal',
    overflow: 'hidden'
  })}>
  <Breadcrumbs>
    <Breadcrumb>Documents</Breadcrumb>
    <Breadcrumb>My Shared Folder</Breadcrumb>
    <Breadcrumb>Projects and Workflows</Breadcrumb>
    <Breadcrumb>Annual Reports 2024</Breadcrumb>
    <Breadcrumb>Marketing Materials</Breadcrumb>
    <Breadcrumb>Q3 Campaign Assets</Breadcrumb>
    <Breadcrumb>Final Deliverables</Breadcrumb>
  </Breadcrumbs>
</div>

API

<Breadcrumbs>
  <Breadcrumb />
</Breadcrumbs>

Breadcrumbs

Name	Type	Default
`children`	`ReactNode`	Default: —
The children of the Breadcrumbs.
`isDisabled`	`boolean`	Default: —
Whether the breadcrumbs are disabled.
`size`	`'M' \| 'L'`	Default: `'M'`
Size of the Breadcrumbs including spacing and layout.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.

`dependencies`	`ReadonlyArray<any>`	Default: —
Values that should invalidate the item cache when using dynamic collections.

Name	Type
`children`	`ReactNode`
The children of the breadcrumb item.
`id`	`Key`
A unique id for the breadcrumb, which will be passed to `onAction` when the breadcrumb is pressed.