search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
92.41k stars 31.82k forks source link

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

Open duynguyen-kun opened 3 weeks ago

duynguyen-kun commented 3 weeks ago

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

Screenshot 2024-06-10 at 10 47 39

Current Trigger unhiding extra items

Screenshot 2024-06-10 at 10 46 34

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 commented 1 week ago

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 commented 2 days ago

image image

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 commented 2 days ago

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

  1. carbondesignsystem
  2. NextUI
  3. Adobe
ZeeshanTamboli commented 1 day ago

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 commented 1 day ago

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 commented 1 day ago

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

duynguyen-kun commented 1 day ago

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 commented 1 day ago

@duynguyen-kun I have reviewed your PR.