In some web apps, breadcrumb navigation can be a user-friendly addition to reveal the user’s whereabouts, and to provide a path back home. So, how do we build such a breadcrumb in Angular?
A breadcrumb path resembles your URL structure, but it’s often not the same. At times, you want different labels, icons and sometimes even translations (i18n). And what about async breadcrumbs?
Tasty breadcrumbs should be configured in your Angular routes, but there is no out-of-the-box solution for this in @angular/router .
When on assignment for a client, I was not able to find a good library. Therefore I built a custom solution, improved it and put up a library myself. Thanks to my colleague @dscheerens for ideas and feedback.
Meet @dirkluijk/ngx-breadcrumpy! ?
• Simply add breadcrumb labels to your Angular routing
• Supporting asynchronous (reactive) breadcrumbs
• Flexible configuration. However you like to roll.
Happy coding!
PS Breadcrumb navigation is named after the way Hansel and Gretel used a breadcrumb trail as a means to find their way back. Strangely named after, because in this smartphone free fairytale the breadcrumbs were eaten by birds… in the story the crumbs did not work. Luckily ngx-breadcrumpy in real life does ?!
Very cool, and I love the naming! ?