Set multiple breadcrumbs regardless of route

[AndriesN]

🧩 Feature request

Set multiple breadcrumbs regardless of route

Description

I would like to have the ability to add multiple breadcrumbs when I'm on a url. Example: route is localhost:4200/path1 then when I resolve data, I use that data to build my own breadcrumb path, I cannot do that as of right now. I can only set one breadcrumb using the .set() method.

Describe the solution you'd like

I'd like a solution where I can inject the breadcrumbService and use an .add() function (maybe?) so I can add multiple breadcrumbs.

Describe alternatives you've considered

I tried using multiple empty route paths with a breadcrumb, also tried ways to access the breadcrumb[] object but could not figure out how I can add multiple breadcrumbs to the array.

[github-actions[bot]]

Hello 👋 @AndriesN
Thank you for raising an issue. We will investigate into the issue and get back to you as soon as possible. Please make sure you have given us as much context as possible.
Feel free to raise a PR if you can fix the issue. Check the local development guide

[gabrielbergoc]

I want this functionality too

[udayvunnam]

@AndriesN @gabrielbergoc Can you confirm the below understanding of the requirement

Instead of

breadcrumbService.set('mentors', 'Mentor View');
breadcrumbService.set('mentor/:id', 'Uday Vunnam');

we want breadcrumbService.add('mentors', 'Mentor View').add('mentor/:id', 'Uday Vunnam')

to make it easy to define the dynamic breadcrumbs?

[gabrielbergoc]

That would work for me! But maybe add the "add" method, not replace "set"? I don't know if it's possible... Like, the current interface and behavior remain unchanged, but at page "x" I may want to add, besides "x", "y" and "z", so that they remain in the breadcrumbs if I navigate further, and when I navigate backwards, only "x > y > z" are removed. And maybe another methods like "remove", "has", etc.

[AndriesN]

Yes, that would be great!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[udayvunnam]

not stale

[anuj9196]

I also want this feature.

Basically, the requirement is that some elements exist on a path without a parent component, but logically are part of a parent component.

Example

Home > Quiz > Quiz 1 > Session > Session 1

I want breadcrumb like this, but the actual path to Session 1 is

{
    path: '/quiz/session',
    data: {breadcrumb: {alias: 'quizName'}}
    children: [
        {
            path: ':id',
            component: SessionComponent,
            data: {breadcrumb: {alias: 'sessionName'}}
        }
    ]
}

Now with this path, I can only set the breadcrumb to the :id path and cannot set the Quiz > Quiz 1 in the breadcrumb.

If support to add multiple breadcrumbs is given, it can be something like

this.breadcrumbService.add([['/quiz', 'Quiz'], ['@quizName', this.getQuizName()], ['/quiz/session', 'Session'], ['@sessionName', this.getSessionName()]);

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[FedeTommi]

Any update on this?