JollyUI
  1. Docs
  2. components
  3. Breadcrumbs

Breadcrumbs

Breadcrumbs display a hierarchy of links to the current page or resource in an application.

  1. Home
  2. Docs
  3. Breadcrumbs
npx @sly-cli/sly add jolly-ui breadcrumbs

Note: Only the default style can be installed via CLI at the moment

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.

Landmark

We do not wrap breadcrumbs in a navigation landmark by default. This is in line with react-aria's behavior. It is up to the user to decide when breadcrumbs should be a navigation landmark.

When breadcrumbs are used as a main navigation element for a page, they can be placed in a navigation landmark. Landmarks help assistive technology users quickly find major sections of a page.

<nav aria-label="Breadcrumbs">
  <Breadcrumbs>
    <BreadcrumbItem>
      <BreadcrumbLink href="/home">Home</BreadcrumbLink>
      <BreadcrumbSeparator />
    </BreadcrumbItem>
    ...
  </Breadcrumbs>
</nav>

It is best to keep the number of landmarks on a page to a minimum, so only place breadcrumbs in a navigation landmark when it represents the primary or secondary navigation for the page. For example, breadcrumbs within table rows or popovers most likely should not be landmarks.

Usage

Basic

  1. Home
  2. Docs
  3. Breadcrumbs

Disabled

You can disable all breadcrumb items by using the isDisabled prop on the <Breadcrumbs> component.

Individual breadcrumbs can also be disabled by passing the isDisabled prop to the <BreadcrumbLink>.

  1. Home
  2. Docs
  3. Breadcrumbs

Custom Separator

To use a custom separator simply place the component as a child of <BreadcrumbSeparator>.

Make sure the separators are within <BreadcrumbItem>.

  1. Home
  2. Docs
  3. Breadcrumbs

If the navigation is too large, you could compose a <BreadcrumbItem> with a dropdown. You can do this by utilizing the Menu Component.

  1. Home
  2. Breadcrumbs

Collapsed

Use <BreadcrumbEllipsis /> component to show collapsed state if the breadcrumb is too long.

You could also combine this with a dropdown menu to show the collapsed links.

  1. Home
  2. Docs
  3. Breadcrumbs

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

More information can be found on the react-aria documentation.

  1. Home
  2. Trendy
  3. March 2022 Assets