Add custom callback to Breadcrumb

[mperrando]

As an alternative to the href property, which issues a navigate command, I would be glad to use a callback in order to implement my own behaviour on breadcrumb click.

E.g.

<Breadcrumb
  items={[
    {
      label: "Root",
      href: "https://www.example.com",
    },
    {
      label: "1st Level",
      onClick: { () => alert("click on breadcrumb" },
    },
    {
      label: "2nd Level",
      href: "https://www.example.com",
    },
    {
      label: "3rd Level",
    },
  ]}
/>

[gabro]

Hi @mperrando, can you elaborate on the use case? Maybe this can be achieved at the router level, e.g. intercepting the URL change and performing the desired action, but it would be helpful to have some context here.

[mperrando]

A developer could use the Breadcrumb component for some other purposes than change the window location.

Imagine a case where a page contains a section that can be navigated by the user, but the rest of the page must remain unchanged; here one would like to use a Breadcrumb inside that section to update only that specific part of the page, without a full reload of the whole page.

Another case could be one where there is a very complex hierarchical view of a large amount of elements that are presented in a position not related to the hierarchy, but to some other relation among the elements.
One of these element is selected by the user, but its ancestor are positioned far away, maybe reachable only be scrolling the view.
The user could benefit from a Breadcrumb component to move back in the hierarchy, maybe collapsing a lot of graphical elements in one click, instead of searching for each ancestor of the selected element up to the desired level, and clicking it to collapse the descending elements.

About the URL interception, even if it is possibile to set it up, isn't quite cumbersome for a developer to do it, only in order to perform a simple action, such as, for example, modifying the state of a React component?

[gabro]

Imagine a case where a page contains a section that can be navigated by the user, but the rest of the page must remain unchanged; here one would like to use a Breadcrumb inside that section to update only that specific part of the page, without a full reload of the whole page.

Do you mean a Breadcrumb nested inside a page, where the Breadcrumb is used to drill up/down only a specific section of the page?

Another case could be one where there is a very complex hierarchical view of a large amount of elements that are presented in a position not related to the hierarchy, but to some other relation among the elements.

If I get this right, you are imagining a case in which the Breadcrumb is used for jumping around sections of the same page?

---

I would like to better understand those cases since they may be better served by other UI components or solved with links instead.

In general, the breadcrumb is intended to be used a top-level to represent the location of a page within a site's hierarchical structure, so it's normally tied to URL navigation.

Scenario A: nested Breadcrumb

This kind of breaks the assumption that Breadcrumb is top-level, but I think it might be a valid use case in some instances. That said, if clicking on a breadcrumb is changing the position in the hierarchy, I would still represent this using routes and links. One good reference is how React Router nested routes work: the nested part of the page you want to navigate to will be tied to a URL, so you can pass the matching href to Breadcrumb.

Scenario B: scrolling inside a page

I can't think of an example in which scrolling inside a page represents a hierarchical change (there may be one, but it doesn't come to my mind), but in general:

• This is probably better served by a Menu or some other navigation pattern, rather than a Breadcrumb
• If Breadcrumb really makes sense, then I would still use href and anchors: you could pass #section-a, #section-b as href of the breadcrumb items and it should behave appropriately.

---

Bottom line: I think the cases you have described can be modeled as URL changes in a fairly natural way (using something like React Router nested routes or section anchors), so the assumption that every Breadcrumb interaction is a link still holds. Adding onClick on Breadcrumb would open to the possibility of running arbitrary side effects, which I think may lead to some strange patterns we may not want to allow.

That said, I'm happy to dig deeper into specific examples and I am absolutely willing to change my mind :-)

[mperrando]

Hello @gabro.

I reopen this issue because we are having a hard time preventing navigation (e.g. when a user has some unsaved data) when a user clicks a breadcrumb with the href property, inside a HashRouter of react-router lib

It seems impossible to disallow the navigation in a href link.

Using the https://reactrouter.com/en/6.22.1/hooks/use-blocker seemed the right direction, but AFAIK it can be only used with BrowserRouter.

We have built a customisation of the useNavigate where we allow to add listeners that prevent the navigation, but this solves only one half of the problem: disallowing navigation on href links remains still an unreached goal.

When you wrote "this can be achieved at the router level, e.g. intercepting the URL change and performing the desired action", what did you have in mind? Can you elaborate a bit so that we can understand how to effectively forbid a navigation?