# Breadcrumbs Breadcrumbs show hierarchy and navigational context for a user's location within an application. ```tsx import {Breadcrumbs, Breadcrumb} from '@react-spectrum/s2'; Home React Spectrum Breadcrumbs ``` ## Content `Breadcrumbs` follows the [Collection Components API](collections.html?component=Breadcrumbs), 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. ```tsx 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 ( /*- begin highlight -*/ {item => {item.label}} /*- end highlight -*/ ); } ``` Accessibility When breadcrumbs are used as a main navigation element for a page, they can be placed in a [navigation landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html). Landmarks help assistive technology users quickly find major sections of a page. Place breadcrumbs inside a `