Breadcrumbs

npx @sly-cli/sly add jolly-ui breadcrumbs

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