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

[duynguyen-kun]

Summary

The breadcrumbs when reaching its max items will display an Ellipsis component. Currently, the component behaves in a way that will unhide any extra items.

Expected Behavior
Modifiable onClick

Current
Trigger unhiding extra items

Examples

No response

Motivation

In my context, it would not worth mentioning if there's only 1 item hidden, but there are up to 4 - 5 items. And I want to display those within a context menu whenever I click on the ellipsis instead of popping off everything and having the layout broken. MUI Breadcrumbs currently does not support a prop to modify that onClick of the ellipsis button base.
Hopefully get your support. Thank you 🙏

Search keywords: Breadcrumbs

[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?

[ZeeshanTamboli]

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

[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)

[ZeeshanTamboli]

@duynguyen-kun I have reviewed your PR.

[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

[duynguyen-kun]

I'm looking at it. Thanks @Sergio16T

[duynguyen-kun]

The PR #42973 looks great. I approved it. TYSM

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @duynguyen-kun! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!