CODEWITHSUNDEEP
angularangular-materialangular6breadcrumbsangular-material-6
monir tuhin
monir tuhin

Reputation: 541

Angular and Material Multi-level Menu with Breadcrumb not working properly

I am working with angular 6 and angular material 6. Here i am trying to create multilevel menu with breadcrumb. I have worked multilevel menu with properly but can not able to navigate menu with selected breadcrumb. When i click on the selected breadcrumb then the menu not getting organized appropriately.

My demo link : stackblitz link here

Upvotes: 0

Views: 16087

Answers (2)

Rafael Guimaraes Siqueira
Rafael Guimaraes Siqueira

Reputation: 181

@Krishna Rathore thank you very much for your solution. I just changed a few things:

  • used the material sidenav and material nav list;
  • icons as the breadcrumbs;
  • also possible to use font-awesome icons.

Here is the forked stackblitz link.

Thought I should post here to give you the credits and to help anyone that comes along.

Upvotes: 3

Krishna Rathore
Krishna Rathore

Reputation: 9687

@hi Monir tuhin

You can try this Solution.

I Have create a demo on Stackblitz.

Component.ts

breadCrumb(menu, index) {
    console.log('sub breadCrumb');
    this.menuHeader.splice(index + 1, this.menuHeader.length - 1);
    if (menu[index] && menu[index].items && menu[index].items.length) {
      this.appitemsTravel = menu[index].items;
    }
}

Component.html

<mat-toolbar color="primary" style="height: 45px; font-size: 16px; font-weight: bold; color: #E6E8EA">
    <span><a  mat-button (click)="breadCrumbMain()" style="color: white;">Main</a></span>
    <span *ngFor="let m of menuHeader; let indx = index" style="color: white;">
        <a  mat-button (click)="breadCrumb(menuHeader, indx)" >{{m.label}}
        <mat-icon fxFlex="10">{{m.icon}}</mat-icon></a>
    </span>
</mat-toolbar>

Upvotes: 5

Related Questions