I am looking to implement the bootstrap breadcrumb component (https://getbootstrap.com/docs/4.0/components/breadcrumb/) in my project.
My goal is to use the breadcrumb to show the entire path to the current directory within a component that resembles a directory view in a file system.
Below is the template code for my folder component:
<div class="breadcrumb">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<app-breadcrumb class="breadcrumb" (refresh)="goToGroup($event)" [parent]="currentGroup?.parent" [displayProperty]="'code'" *ngIf="currentGroup !== undefined && currentGroup.parent"></app-breadcrumb>
</ol>
</nav>
</div>
And here is the template code for my breadcrumb component:
<li class="breadcrumb-item">
<a (click)="goTo(parent.uid)">{{parent[displayProperty]}}</a>
</li>
<app-breadcrumb (refresh)="refreshFolder($event)" [parent]="parent.parent" [displayProperty]="displayProperty" *ngIf="parent.parent" class="breadcrumb"></app-breadcrumb>
The issue I am facing is that the CSS selectors provided by Bootstrap are not working as expected due to the nodes added by Angular:
https://i.stack.imgur.com/5pFXj.png
For instance, the selector '.breadcrumb-item+.breadcrumb-item::before' is not functioning properly:
.breadcrumb-item+.breadcrumb-item::before {
display: inline-block;
padding-right: .5rem;
padding-left: .5rem;
color: #6c757d;
content: "/";
}
I have tried several approaches but have been unable to resolve this issue on my own.
Could you kindly provide some guidance or assistance?
Thank you!