If there are more breadcrumbs, we are currently displaying them in a horizontal scroll (refer codesandbox). Instead of that, can we place a menu icon in the middle, and on clicking it, show all the breadcrumb items in a dropdown to quickly jump to any item (refer image)? Is this kind of behavior available in react-aria-component Breadcrumbs?

[Nagendra7509]

https://codesandbox.io/p/sandbox/tender-hill-tp9wpm

[snowystinger]

Thank for the discussion, you can definitely do this. See our implementation https://react-spectrum.adobe.com/s2/index.html?path=/docs/breadcrumbs--docs
Source here: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/s2/src/Breadcrumbs.tsx

It is a little more work, using a custom collection renderer, but it's definitely doable. See docs as well https://react-spectrum.adobe.com/react-aria/collections.html#advanced-custom-collection-renderers

[Nagendra7509]

To implement the same Breadcrumbs component code in our app, there are too many dependencies. Is there any way to do it with minimal dependencies or import this component from somewhere else? Can you suggest an approach to integrate this component into our app?

[snowystinger]

If you'd like to put together a codesandbox or stackblitz showing what you're trying, we can help you debug. I'm not sure what you mean right now by too many dependencies.

[Nagendra7509]

We’re trying to implement the Breadcrumbs component in our code using the source code you shared from GitHub. But the component has multiple dependencies, such as ActionButton, styles, Text, Menu, etc.

[snowystinger]

I see, you don't need to use them and if you aren't using the Spectrum styled components you shouldn't use them. Instead, you can create those based on other RAC components as/if you need them.
I look forward to your codesandbox or stackblitz where we can offer more directed information.

[Nagendra7509]

Could you please guide me on how I can achieve my requirement, or if possible, update my codeSandbox accordingly?

[snowystinger]

It doesn't look like you've updated your codesandbox to try anything yet. Once you have tried something, one of us can help. I suggest trying to implement the custom collection renderer to render the breadcrumbs as they already are before trying to implement the collapsing. That way you have a first step to try, and if you can't get that working, it won't be as much to review from our end.