How to implement breadcrumb navigation in Angular and PrimeNG?

Piotr Korlaga
Jun 6 · 4 min read

Some time ago

I was struggling with breadcrumb navigation in one of my Angular apps. I had read many articles about that but couldn’t find properly working solution. After many experiments, I created the implementation which I want to share in this article.

1. Define routing

It is good practice to split an app into a few modules. I decided to extract the home page module and a module for each continent. This is the first level of our hierarchy: continents. The code looks as follows:

  1. List of children should contain child with empty path and other children with paths

2. Pass breadcrumb label in routing data

Angular Router allows us to pass any data while navigating. To achieve that the only one thing we have to do is extending our routing table with additional property data.

3. Create breadcrumb menu

To simplify this step I used p-breadcrumb component which comes from PrimeNG. This is a pretty cool UI library with almost every UI component which you will probably ever need in your app. Check this out!

And that’s it!

We successfully integrate PrimeNG breadcrumb component with Angular Routing and have working breadcrumb!


Applantic

apps & more