@if (breadCrumbs().length > 0) {
  <ion-grid class="ion-no-padding ion-padding-top">
    <ion-row>
      <ion-col size="auto" class="ion-display-flex ion-align-items-center ion-text-nowrap" aria-label="Breadcrumb">
        @for (item of breadCrumbs(); track item.id; let i = $index) {
          @if (i > 0) {
            <span class="breadcrumb-separator ion-align-self-center" aria-hidden="true">/</span>
          }
          <ion-button class="breadcrumb-button ion-no-padding" style="text-transform: none" [class.is-active]="item.isLast" (keydown.enter)="handleNavigate($event, item.node, item.isLast)" (click)="handleNavigate($event, item.node, item.isLast)" size="default" fill="clear">
            @if (item.icon !== null) {
              <ion-icon class="crumb-icon" [name]="item.icon" [color]="item.isLast ? 'primary' : 'medium'"></ion-icon>&nbsp;
            }
            @if (item.label !== "") {
              <span [title]="item.label">{{ item.label }}</span>
            }
          </ion-button>
        }
      </ion-col>
      <ion-col class="ion-padding-start" style="align-self: center; text-align: center">
        <oe-navigation-chips [children]="commonChildren" (navigate)="navigationService.navigateTo($event)" (navigateAbsolute)="navigationService.navigateAbsolute($event)"></oe-navigation-chips>
      </ion-col>
    </ion-row>
  </ion-grid>
}