angularprimengbreadcrumbs

PrimeNG Breadcrumb Component generates weird "/"


I tried to add a breadcrumb in my Angular-Project using primeng. I quickly encountered that weird "/" over my little arrows between each breadcrumb

-I added the BreadcrumbModule from Primeng in my app.module and the component im using it in(Also using Primeng Themes+Flex) -I looked up different forum posts but couldnt find any solution -Also tried to just hide it in my css but either my code is wrong or you arent realy able to hide it: -Upon researching I could only find out that this part is generated by "li.p-breadcrumb-chevron.pi-circle-fill.ng-star-inserted::before"

html code:

<p-breadcrumb [model]="breadcrumbItems" [home]="home">
</p-breadcrumb>

.ts code:

    this.home = { icon: 'pi pi-home', routerLink: "/"};

    this.breadcrumbItems = [
      { label: "System", routerLink: "component1"},
      {label: "user", routerLink: "component2"}
    ];

Solution

  • I think BrowserAnimationModule might be the culprit for this class getting added, anyway you can just get rid of this by using the below CSS

    global styles.css (Fix in global styles)

    li.p-breadcrumb-chevron .ng-star-inserted {
        display: none !important;
    }
    

    Fix on the component scss file using ::ng-deep

    ::ng-deep li.p-breadcrumb-chevron .ng-star-inserted {
        display: none !important;
    }
    

    Stackblitz - issue not reproducible