How to implement breadcrumb navigation in Angular and PrimeNG?
Have you ever struggled with the implementation of breadcrumb in your Angular app? I just created a working example. Check out this article for code, demo, and explanations!
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.
Our goal is to create breadcrumb which tells users where he is on the webpage. Breadcrumb should also contain links. Thanks to that links, the user can navigate back and forward through the app.
To demonstrate I created a simple app — World Explorer. [DEMO, CODE]
The app is extremely simple. It contains only two sections: breadcrumb navigation and page content. On every page we have clickable links which navigate a user through the world in the following hierarchy:
Home -> Continent -> Country -> City
Simple, right?
In the following paragraphs, I will show you how to integrate Angular Router with breadcrumb navigation. I will try to cover all important issues, but at the same time, I strongly encourage you to dive in the code on GitHub and explore it on your own.
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:
When the user clicks Europe on the home screen we want to display a list of countries. User can click on any of countries and then we display a list of cities in that country. And when finally user click on any of the cities, a nice picture of that city should show up.
Note that we want to display every level of hierarchy (Continent -> Country -> City) in the same place on the webpage. So the next level should replace the previous one. To achieve that we have to create a little bit tricky routing table. As an example: let’s take a look at Europe Module routing:
For every level of hierarchy we need to specify:
- Object with two properties path and children or path and component
- List of children should contain child with empty path and other children with paths
The path is the URL part to which we navigate the user. In the example above, when we navigate the user to path /europe/germany then the child component with an empty path from the children list will show up. It’s GermanyComponent and contains a list of German cities. The user can click on Berlin, then the screen with a list of cities will be replaced with component contains a picture of the city which is specified for path: ‘berlin’.
If we would like to extend our hierarchy by adding for example districts we have to change our routing as follow:
So to add the next level to the hierarchy of components we have to replace the component property with children and place the previous component as a child with an empty path.
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.
In data object, we declare breadcrumb property which is a label of a breadcrumb menu item. You probably noticed that I assigned a null value to breadcrumb properties in some cases. This is because when some property is undefined it inherits the value from its parent. That’s why I had to erase this value by assigning nulls.
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!
To display our menu we have to pass to p-breadcrumb a list of menuItems which are basically objects contain label and url property.
The list of menuItems has to be rebuilt every time a user navigate through the app. So we have to subscribe to NavigationEnd event:
Let’s take a look at how we actually build the breadcrumb menuItems in method createBreadcrumbs:
In this method, we iterate over children to create MenuItem object which contains url and label. We append it to the list of menuItems which we pass as an input of p-breadcrumb component.
And that’s it!
We successfully integrate PrimeNG breadcrumb component with Angular Routing and have working breadcrumb!
I encourage you to go through the code on GitHub and try to modify it to your needs. I used a hierarchy of countries and cities as an example but it can be easily adapted to any app.
Hope it was helpful!
Follow to not miss new articles! 🚀
Tap the 👏 button if you found this article useful!
About us
Applantic is a team of passionate software developers. We write our stories on Medium ✍ but you can find us on Instagram 📷 or Facebook ✍ as well.
The author of this article is Piotr. He is a software engineer — well-versed in all phases of the software development lifecycle. He strongly believes in being agile and engineering culture. You can find him on LinkedIn and GitHub.
