feat: Breadcrumbs: More Information on collapsed Click

[EinfachHans]

Feature Request

Ionic version:

[ ] 4.x [ ] 5.x [X] 6.x

Describe the Feature Request

The Breadcrumbs Component has a ionCollapsedClick Output. I would like to have more Information here about which Breadcrumbs are currently collapsed, to only show these in a Popover.

Describe Preferred Solution

The Detail should contain the info for example like this:

{
  collapsedBreadcrumbs: [
    {
      // all information we can get about that breadcrumb
    }
  ]
}

[liamdebeasi]

Thanks for the issue. We have been talking about a feature like this internally. Would an array of references to the collapsed ion-breadcrumb components be helpful here?

[EinfachHans]

I guess yes, because all the Information should be there. But maybe even better was a Option to make the breadcrumbs automatically open a Popup with the collapsed items in a list?

I think this will be the most used logic here and so not everybody has to create it theirself.

[liamdebeasi]

Thanks, that makes sense. I think the concern we had with automatically opening a popover is making assumptions about how the user wants to present the popover/customize it (maybe they want to present an action sheet or a modal instead?). If we presented this automatically, developers would lose that customization. We can definitely provide more information about the collapsed breadcrumbs on click though.

[EinfachHans]

The Advantage would be to not reimplement the wheel. A Breadcrumb has many customizable options like "download", "color", "rel" etc., which need to be implement completely new to make everything work.

I would definitely give the user the option to show their own modal, popover or do whatever thy want, but i think a default "navigation" popup which does support the same things like the breadcrumb would make sense.

[liamdebeasi]

I can bring it up with the team and see what they think.

[liamdebeasi]

Spoke with the team, and the current plan for adding more information is to provide an array of element references of the collapsed ion-breadcrumb components in the event.detail payload.

From there developers can manipulate the data however they would like. For example, they could render the breadcrumb content as regular buttons by grabbing the .textContent value on each of the ion-breadcrumb components.

---

In terms of automatically displaying a popover, this is not something we currently have planned as developers would lose a significant amount of customization by us abstracting away the ion-popover. However, we will be adding examples that will show developers how to get this wired up quickly.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/23611, and this feature will be in the next v6 beta.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.