abp/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html

<ul class="navbar-nav">
  <ng-container
    *ngFor="let route of visibleRoutes$ | async; trackBy: trackByFn"
    [ngTemplateOutlet]="route?.children?.length ? dropdownLink : defaultLink"
    [ngTemplateOutletContext]="{ $implicit: route }"
  >
  </ng-container>

  <ng-template #defaultLink let-route>
    <li class="nav-item" *abpPermission="route.requiredPolicy">
      <a class="nav-link" [routerLink]="[route.url]"
        ><i *ngIf="route.iconClass" [ngClass]="route.iconClass"></i>
        {{ route.name | abpLocalization }}</a
      >
    </li>
  </ng-template>

  <ng-template #dropdownLink let-route>
    <li
      #navbarRootDropdown
      *abpPermission="route.requiredPolicy"
      [abpVisibility]="routeContainer"
      class="nav-item dropdown"
      display="static"
      (click)="
        navbarRootDropdown.expand
          ? (navbarRootDropdown.expand = false)
          : (navbarRootDropdown.expand = true)
      "
    >
      <a
        class="nav-link dropdown-toggle"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
        href="javascript:void(0)"
      >
        <i *ngIf="route.iconClass" [ngClass]="route.iconClass"></i>
        {{ route.name | abpLocalization }}
      </a>
      <div
        #routeContainer
        class="dropdown-menu border-0 shadow-sm"
        (click)="$event.preventDefault(); $event.stopPropagation()"
        [class.d-block]="smallScreen && navbarRootDropdown.expand"
      >
        <ng-template
          #forTemplate
          ngFor
          [ngForOf]="route.children"
          [ngForTrackBy]="trackByFn"
          [ngForTemplate]="childWrapper"
        ></ng-template>
      </div>
    </li>
  </ng-template>

  <ng-template #childWrapper let-child>
    <ng-template
      [ngTemplateOutlet]="child?.children?.length ? dropdownChild : defaultChild"
      [ngTemplateOutletContext]="{ $implicit: child }"
    ></ng-template>
  </ng-template>

  <ng-template #defaultChild let-child>
    <div class="dropdown-submenu" *abpPermission="child.requiredPolicy">
      <a class="dropdown-item" [routerLink]="[child.url]">
        <i *ngIf="child.iconClass" [ngClass]="child.iconClass"></i>
        {{ child.name | abpLocalization }}</a
      >
    </div>
  </ng-template>

  <ng-template #dropdownChild let-child>
    <div
      [abpVisibility]="childrenContainer"
      class="dropdown-submenu"
      ngbDropdown
      #dropdownSubmenu="ngbDropdown"
      placement="right-top"
      [autoClose]="true"
      *abpPermission="child.requiredPolicy"
    >
      <div ngbDropdownToggle [class.dropdown-toggle]="false">
        <a
          abpEllipsis="210px"
          [abpEllipsisEnabled]="!smallScreen"
          role="button"
          class="btn d-block text-left dropdown-toggle"
        >
          <i *ngIf="child.iconClass" [ngClass]="child.iconClass"></i>
          {{ child.name | abpLocalization }}
        </a>
      </div>
      <div
        #childrenContainer
        class="dropdown-menu border-0 shadow-sm"
        [class.d-block]="smallScreen && dropdownSubmenu.isOpen()"
      >
        <ng-template
          ngFor
          [ngForOf]="child.children"
          [ngForTrackBy]="trackByFn"
          [ngForTemplate]="childWrapper"
        ></ng-template>
      </div>
    </div>
  </ng-template>
</ul>