# Breadcrumbs Breadcrumbs display a hierarchy of links to the current page or resource in an application. ## 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 type {Key} from 'react-aria-components'; import {Breadcrumbs, Breadcrumb} from 'vanilla-starter/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 ( /*- 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 `