[material-ui][Breadcrumbs] Allow overriding `onClick` button base of ellipsis icon about material-ui

[ZeeshanTamboli]

Yes, you can create a PR to add this feature in Material UI Breadcrumbs component.

[ZeeshanTamboli]

@duynguyen-kun I have reviewed your PR.

[ZeeshanTamboli]

Why use breadcrumbs to trigger a menu? These two UI components shouldn't be combined. Can you provide an example of this in a real world application?

[duynguyen-kun]

Hi @ZeeshanTamboli,
Similar to these ones, when there are too many items being hidden within the ellipsis, e.g: 4 or 5 items, it would be convenient to view all of them as a menu instead of exposing everything which might result in developers having two concerns:

1. The breadcrumbs are horizontally taking all the spaces of the viewport. We might need to think of breaking them into multiple lines
2. When the labels are too long, we need to think of how we should truncate them into smaller length of text.

[duynguyen-kun]

Just found some examples of using overflow menu for accessibility enhancement.

1. carbondesignsystem
2. NextUI
3. Adobe

[ZeeshanTamboli]

I see this is supported in Joy UI: https://mui.com/joy-ui/react-breadcrumbs/#condensed-with-menu.

We can add this new feature. Feel free to work on it.

[duynguyen-kun]

That's nice. However, it'd be ideal if my repo wouldn't have to install another dependency like Joy UI just for that behavior. So what you mean is I can create a PR for this? Or is there anything I can do to get this feature implemented?

[duynguyen-kun]

Hi @ZeeshanTamboli ,
Do you mind take a look at my PR? Let me know if I need to update anything regarding the contributing guides (so far i know i haven't updated docs API)

[Sergio16T]

Hello @ZeeshanTamboli! I'm beginning work on adding this feature. Could you please assign it to me?

[Sergio16T]

@ZeeshanTamboli PR is ready for review.

[Sergio16T]

@ZeeshanTamboli after reviewing the ask again. I realized that the original ask from issue was to be able to create the menu functionality similar to the Joy package example. That is currently possible without any code changes. I updated the PR to instead update the documentation to demonstrate how this can be implemented using the MUI package.

@duynguyen-kun I believe you are wanting to implement something like this:
https://github.com/mui/material-ui/pull/42973/files#diff-5e9f55b9f0c001a9bc86e156849c1ce1b0e52693a47a3e4b8a49a8d6a91665b3