- Docs
- Breadcrumbs
Breadcrumbs
Breadcrumbs display a hierarchy of links to the current page or resource in an application.
Copy and paste the following code into your project.
Loading...Update the import paths to match your project setup.
Client Side Routing
The <BreadcrumbItem> component works with frameworks and client side routers like Next.js, Remix and React Router.
As with other React Aria components that support links, this works via the RouterProvider component at the root of your app.
See the client side routing guide to learn how to set this up.
Usage
Basic
Dynamic Items
Breadcrumbs follows the Collection Components API, accepting both static and dynamic collections. Dynamic collections, as shown below, can be used when the options come from an external data source such as an API call, or update over time.
As seen below, an iterable list of options is passed to the Breadcrumbs using the items prop.
A function provided as children of the <Breadcrumbs> is called to render each item.
When a breadcrumb is pressed, the onAction event is triggered and the breadcrumbs array is updated
- Home
- Trendy
- March 2022 Assets