ABP Angular breadcrumb does not navigate on click #10067

2 Answer(s)

• 

  0

  AI-Bot created 11 hours ago

  Support Team ABP Agent

  1. Solution

  • Current behavior: In ABP Angular, the built-in abp-breadcrumb component renders items as plain text by default. This is expected; it doesn’t automatically generate router links from the Angular route tree. To make items navigable, you must provide href/routerLink explicitly when defining breadcrumb items.
  • Recommended approach:
    1. If you build breadcrumbs manually in a layout/component, pass a link for each item except the last (active) one:

  <abp-breadcrumb>
      <abp-breadcrumb-item [href]="'/home'" title="Home"></abp-breadcrumb-item>
      <abp-breadcrumb-item [href]="'/administration'" title="Administration"></abp-breadcrumb-item>
      <abp-breadcrumb-item title="Users"></abp-breadcrumb-item>
    </abp-breadcrumb>
  

  • href may be any router path. If you prefer Angular bindings, wrap a custom template and use routerLink:

  <abp-breadcrumb>
      <ng-container abpBreadcrumbItem>
        <a routerLink="/home">Home</a>
      </ng-container>
      <ng-container abpBreadcrumbItem>
        <a routerLink="/administration">Administration</a>
      </ng-container>
      <ng-container abpBreadcrumbItem>Users</ng-container>
    </abp-breadcrumb>
  

  2. If you generate breadcrumbs from route data, add a data field (e.g., breadcrumb and link) to your routes and map them when rendering:

  const routes: Routes = [
      { path: 'home', data: { breadcrumb: 'Home', link: '/home' }, ... },
      { path: 'administration', data: { breadcrumb: 'Administration', link: '/administration' }, ... },
      { path: 'administration/users', data: { breadcrumb: 'Users' }, ... },
    ];
  

  // in breadcrumb component
    items = this.router.events.pipe(
      filter(e => e instanceof NavigationEnd),
      map(() => {
        const parts: { title: string; link?: string }[] = [];
        let route = this.activatedRoute.root;
        while (route) {
          const data = route.snapshot.data;
          if (data?.breadcrumb) {
            parts.push({ title: data.breadcrumb, link: data.link });
          }
          route = route.firstChild!;
        }
        return parts;
      })
    );
  

  <abp-breadcrumb>
      <ng-container *ngFor="let i of (items | async); let last = last" abpBreadcrumbItem>
        <a *ngIf="!last && i.link" [routerLink]="i.link">{{ i.title }}</a>
        <span *ngIf="last || !i.link">{{ i.title }}</span>
      </ng-container>
    </abp-breadcrumb>
  

  • Is it a bug? The current Angular breadcrumb control requires you to supply links; it does not infer them. That’s by design. The GitHub discussion you referenced requests linkable items by default, but until that’s implemented, use one of the patterns above.
  • Workaround summary:
    • Provide href/routerLink for intermediate breadcrumb items when declaring them.
    • Or, drive breadcrumbs from Angular route data and bind routerLink for all but the last item.

  2. Sources

  • ABP Breadcrumbs (usage and href on items)
    • https://abp.io/docs/latest/framework/ui/mvc-razor-pages/tag-helpers/breadcrumbs

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  sumeyye.kurtulus created 2 hours ago

  Support Team Angular Expert

  Hello,

  This behavior is intentional. To clarify, the breadcrumb displays the hierarchy for the current page. It is not meant to navigate to the identity page when you are on users, as that page does not exist in our setup.

  I recommend checking the related source code for the Lepton X Pro module, which you can find in the suite tool documentation here: https://abp.io/docs/latest/suite/source-code.

  Below is a list of components you may want to review.

  • BreadcrumbService
  • BreadcrumbRouteListenerService
  • BreadcrumbComponent

  You can let us know if you need further assistance. Thank you for your cooperation.

  Save Cancel