Breadcrumbs in pure AngularJS with crumble

There are many libraries for breadcrumbs in angularJS but most of them are built for ui-router. What if existing project uses standard angular-route and we don’t want to change that?

We can use crumble, a small library written by Raphael von der Grün which is easy to implement and highly customizable. Works well with angular-route.

raphinesse/angular-crumble

Installation is already described in the repository documentation so we can skip it and go forward to some custom configuration.

Hide breadcrumbs when label is not defined

By default label string is required for every route in project, otherwise you’ll get an error in console.

We can hide breadcrumbs for specified pages by overriding getCrumb function in our top-level controller.

Template:

Controller:

Any route without defined label will set hideBreadcrumbs to true.

angular-translate integration

If you want to use translation slugs, override getCrumb function again by adding the $translate method to the label string.

Now you can use previously defined slugs which will be translated and interpolated on output.

Thanks for reading!
If you have any suggestions, feel free to contact me.
Looking for an experienced developer? Visit narloch.eu.