Breadcrumbs

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

Example#

<Breadcrumbs>
  <Item key="home">Home</Item>
  <Item key="trendy">Trendy</Item>
  <Item key="march 2020 assets">March 2020 Assets</Item>
</Breadcrumbs>

<Breadcrumbs>
  <Item key="home">Home</Item>
  <Item key="trendy">Trendy</Item>
  <Item key="march 2020 assets">March 2020 Assets</Item>
</Breadcrumbs>

<Breadcrumbs>
  <Item key="home">
    Home
  </Item>
  <Item key="trendy">
    Trendy
  </Item>
  <Item key="march 2020 assets">
    March 2020 Assets
  </Item>
</Breadcrumbs>

Content#

Breadcrumbs follow the Collection Components API, accepting only static children. Similar to Menu, Breadcrumbs accepts <Item> elements as children, each with a key prop, which is passed to the onAction handler to identify the selected item. Basic usage of Breadcrumbs, as seen in the example above, shows a list of Item elements, populated with a string. See Events for more information.

Internationalization#

In order to internationalize Breadcrumbs, the content of all child items should be localized.

Events#

Use the onAction prop as a callback to handle press events on items.

function Example() {
  let folders = [
    {id: 1, label: 'Home'},
    {id: 2, label: 'Trendy'},
    {id: 3, label: 'March 2020 Assets'}
  ];
  let [folderId, setFolderId] = React.useState(null);
  return (
    <div>
      <Breadcrumbs onAction={(a) => setFolderId(a)}>
        {folders.map(f => <Item key={f.id}>{f.label}</Item>)}
      </Breadcrumbs>
      <p>You pressed folder ID: {folderId}</p>
    </div>
  );
}

function Example() {
  let folders = [
    { id: 1, label: 'Home' },
    { id: 2, label: 'Trendy' },
    { id: 3, label: 'March 2020 Assets' }
  ];
  let [folderId, setFolderId] = React.useState(null);
  return (
    <div>
      <Breadcrumbs onAction={(a) => setFolderId(a)}>
        {folders.map((f) => (
          <Item key={f.id}>{f.label}</Item>
        ))}
      </Breadcrumbs>
      <p>You pressed folder ID: {folderId}</p>
    </div>
  );
}

function Example() {
  let folders = [
    {
      id: 1,
      label: 'Home'
    },
    {
      id: 2,
      label: 'Trendy'
    },
    {
      id: 3,
      label:
        'March 2020 Assets'
    }
  ];
  let [
    folderId,
    setFolderId
  ] = React.useState(
    null
  );
  return (
    <div>
      <Breadcrumbs
        onAction={(a) =>
          setFolderId(a)}
      >
        {folders.map(
          (f) => (
            <Item
              key={f.id}
            >
              {f.label}
            </Item>
          )
        )}
      </Breadcrumbs>
      <p>
        You pressed
        folder ID:{' '}
        {folderId}
      </p>
    </div>
  );
}

Links#

By default, interacting with an item in Breadcrumbs triggers onAction. Items may also be links to another page or website. This can be achieved by passing the href prop to the <Item> component.

<Breadcrumbs>
  <Item href="/">Home</Item>
  <Item href="/react-spectrum/">React Spectrum</Item>
  <Item href="/react-spectrum/Breadcrumbs.html">Breadcrumbs</Item>
</Breadcrumbs>

<Breadcrumbs>
  <Item href="/">Home</Item>
  <Item href="/react-spectrum/">React Spectrum</Item>
  <Item href="/react-spectrum/Breadcrumbs.html">
    Breadcrumbs
  </Item>
</Breadcrumbs>

<Breadcrumbs>
  <Item href="/">
    Home
  </Item>
  <Item href="/react-spectrum/">
    React Spectrum
  </Item>
  <Item href="/react-spectrum/Breadcrumbs.html">
    Breadcrumbs
  </Item>
</Breadcrumbs>

Client side routing#

The <Item> component works with frameworks and client side routers like Next.js and React Router. As with other React Spectrum components that support links, this works via the Provider component at the root of your app. See the client side routing guide to learn how to set this up.

Props#

Visual options#

Size#

View guidelines

Small

<Breadcrumbs size="S">
  <Item key="home">Home</Item>
  <Item key="trendy">Trendy</Item>
</Breadcrumbs>

<Breadcrumbs size="S">
  <Item key="home">Home</Item>
  <Item key="trendy">Trendy</Item>
</Breadcrumbs>

<Breadcrumbs size="S">
  <Item key="home">
    Home
  </Item>
  <Item key="trendy">
    Trendy
  </Item>
</Breadcrumbs>

Medium

<Breadcrumbs size="M">
  <Item key="home">Home</Item>
  <Item key="trendy">Trendy</Item>
</Breadcrumbs>

<Breadcrumbs size="M">
  <Item key="home">Home</Item>
  <Item key="trendy">Trendy</Item>
</Breadcrumbs>

<Breadcrumbs size="M">
  <Item key="home">
    Home
  </Item>
  <Item key="trendy">
    Trendy
  </Item>
</Breadcrumbs>

Large (default)

<Breadcrumbs size="L">
  <Item key="home">Home</Item>
  <Item key="trendy">Trendy</Item>
</Breadcrumbs>

<Breadcrumbs size="L">
  <Item key="home">Home</Item>
  <Item key="trendy">Trendy</Item>
</Breadcrumbs>

<Breadcrumbs size="L">
  <Item key="home">
    Home
  </Item>
  <Item key="trendy">
    Trendy
  </Item>
</Breadcrumbs>

Multiline#

Use the isMultiline prop to place the last item below the other items. This adds emphasis to the current location as a page title or heading.

<Breadcrumbs isMultiline>
  <Item key="home">Home</Item>
  <Item key="trendy">Trendy</Item>
  <Item key="march 2020 assets">March 2020 Assets</Item>
</Breadcrumbs>

<Breadcrumbs isMultiline>
  <Item key="home">Home</Item>
  <Item key="trendy">Trendy</Item>
  <Item key="march 2020 assets">March 2020 Assets</Item>
</Breadcrumbs>

<Breadcrumbs
  isMultiline
>
  <Item key="home">
    Home
  </Item>
  <Item key="trendy">
    Trendy
  </Item>
  <Item key="march 2020 assets">
    March 2020 Assets
  </Item>
</Breadcrumbs>

Root context#

View guidelines

Some applications find that always displaying the root item is useful to orient users. This variation keeps the root visible when other items are truncated into the menu.

<View overflow="hidden" width="200px">
  <Breadcrumbs showRoot>
    <Item key="home">Home</Item>
    <Item key="trendy">Trendy</Item>
    <Item key="2020 assets">March 2020 Assets</Item>
    <Item key="winter">Winter</Item>
    <Item key="holiday">Holiday</Item>
  </Breadcrumbs>
</View>

<View overflow="hidden" width="200px">
  <Breadcrumbs showRoot>
    <Item key="home">Home</Item>
    <Item key="trendy">Trendy</Item>
    <Item key="2020 assets">March 2020 Assets</Item>
    <Item key="winter">Winter</Item>
    <Item key="holiday">Holiday</Item>
  </Breadcrumbs>
</View>

<View
  overflow="hidden"
  width="200px"
>
  <Breadcrumbs
    showRoot
  >
    <Item key="home">
      Home
    </Item>
    <Item key="trendy">
      Trendy
    </Item>
    <Item key="2020 assets">
      March 2020 Assets
    </Item>
    <Item key="winter">
      Winter
    </Item>
    <Item key="holiday">
      Holiday
    </Item>
  </Breadcrumbs>
</View>

Disabled#

Breadcrumbs in a disabled state shows items, but indicates that navigation is not available. This can be used to maintain layout continuity.

<Breadcrumbs isDisabled>
  <Item key="home">Home</Item>
  <Item key="trendy">Trendy</Item>
  <Item key="march 2020 assets">March 2020 Assets</Item>
</Breadcrumbs>

<Breadcrumbs isDisabled>
  <Item key="home">Home</Item>
  <Item key="trendy">Trendy</Item>
  <Item key="march 2020 assets">March 2020 Assets</Item>
</Breadcrumbs>

<Breadcrumbs
  isDisabled
>
  <Item key="home">
    Home
  </Item>
  <Item key="trendy">
    Trendy
  </Item>
  <Item key="march 2020 assets">
    March 2020 Assets
  </Item>
</Breadcrumbs>

Visible items (overflow behavior)#

View guidelines

Breadcrumbs collapses items into a menu when space is limited. It will only show a maximum of 4 visible items including the root and menu button, if either are visible. If the root item cannot be rendered in the available horizontal space, it will be collapsed into the menu regardless of showRoot. Note that the last breadcrumb item will automatically truncate with an ellipsis instead of collapsing into the menu.

Resize your browser window to see the above behavior in the examples below.

<Breadcrumbs>
  <Item key="shared">My Shared Documents</Item>
  <Item key="catalogue">North America Spring Catalogue</Item>
  <Item key="march 2020">March 2020</Item>
  <Item key="assets">
    Downloaded Screenshots and Assets (approval required)
  </Item>
  <Item key="streetwear">Streetwear</Item>
  <Item key="jackets">Jackets</Item>
</Breadcrumbs>

<Breadcrumbs>
  <Item key="shared">My Shared Documents</Item>
  <Item key="catalogue">
    North America Spring Catalogue
  </Item>
  <Item key="march 2020">March 2020</Item>
  <Item key="assets">
    Downloaded Screenshots and Assets (approval required)
  </Item>
  <Item key="streetwear">Streetwear</Item>
  <Item key="jackets">Jackets</Item>
</Breadcrumbs>

<Breadcrumbs>
  <Item key="shared">
    My Shared Documents
  </Item>
  <Item key="catalogue">
    North America
    Spring Catalogue
  </Item>
  <Item key="march 2020">
    March 2020
  </Item>
  <Item key="assets">
    Downloaded
    Screenshots and
    Assets (approval
    required)
  </Item>
  <Item key="streetwear">
    Streetwear
  </Item>
  <Item key="jackets">
    Jackets
  </Item>
</Breadcrumbs>

<Breadcrumbs showRoot>
  <Item key="shared">My Shared Documents</Item>
  <Item key="catalogue">North America Spring Catalogue</Item>
  <Item key="march 2020">March 2020</Item>
  <Item key="assets">
    Downloaded Screenshots and Assets (approval required)
  </Item>
</Breadcrumbs>

<Breadcrumbs showRoot>
  <Item key="shared">My Shared Documents</Item>
  <Item key="catalogue">
    North America Spring Catalogue
  </Item>
  <Item key="march 2020">March 2020</Item>
  <Item key="assets">
    Downloaded Screenshots and Assets (approval required)
  </Item>
</Breadcrumbs>

<Breadcrumbs showRoot>
  <Item key="shared">
    My Shared Documents
  </Item>
  <Item key="catalogue">
    North America
    Spring Catalogue
  </Item>
  <Item key="march 2020">
    March 2020
  </Item>
  <Item key="assets">
    Downloaded
    Screenshots and
    Assets (approval
    required)
  </Item>
</Breadcrumbs>