<ng-container *ngIf="route.length > 0">

    <button
        tabindex="0"
        class="adf-dropdown-breadcumb-trigger"
        (click)="open()"
        data-automation-id="dropdown-breadcrumb-trigger">
        <mat-icon [class.isRoot]="!hasPreviousNodes()">folder</mat-icon>
    </button>
    <mat-icon class="adf-dropddown-breadcrumb-item-chevron">chevron_right</mat-icon>

    <mat-select
        *ngIf="hasPreviousNodes()"
        class="adf-dropdown-breadcrumb-path"
        tabindex="0"
        data-automation-id="dropdown-breadcrumb-path" >

        <mat-option
            *ngFor="let node of previousNodes;"
            (click)="onRoutePathClick(node, $event)"
            class="adf-dropdown-breadcrumb-path-option"
            tabindex="0"
            data-automation-class="dropdown-breadcrumb-path-option">
            {{ node.name }}
        </mat-option>
    </mat-select>

    <span
        class="adf-current-folder"
        [class.isRoot]="!hasPreviousNodes()"
        data-automation-id="current-folder">{{ currentNode.name }}</span>
</ng-container>
