Breadcrumbs in Pure AngularJS with Crumble

There are many breadcrumb libraries available for AngularJS, but most are designed to work with ui-router. So what if your existing project uses the standard angular-route and switching routers isn’t an option?

That’s where Crumble comes in—a lightweight library by Raphael von der Grün that is easy to implement, highly customizable, and fully compatible with angular-route.

Installation steps are already detailed in the official repository, so let’s skip that and dive into some custom configurations.

Hiding breadcrumbs when no label is defined

By default, Crumble requires a label string for every route. If a label is missing, it will throw an error in the console.

To avoid this and selectively hide breadcrumbs on certain pages, you can override the getCrumb function in your top-level controller.

<ol ng-hide="hideBreadcrumbs">
  <li ng-repeat="bc in crumble.trail">
    <a ng-href="#"></a>
  </li>
</ol>

crumble.getCrumb = function (path) {
    var route = crumble.getRoute(path);
    if (!route) {
        console.info('Breadcrumbs error: invalid route');
        return { label: null };
    }
    if (!angular.isString(route.label)) {
        console.info('Breadcrumbs error: no label for the current route.');
        route.label = null;
    }
    return {
        path: $interpolate(path)(crumble.context),
        label: $interpolate(route.label)(crumble.context),
    };
};

$rootScope.$on('$routeChangeSuccess', function (e, current) {
    crumble.update();
    $scope.hideBreadcrumbs = (current.$$route.label == null);
});

This way, any route without a defined label will automatically set hideBreadcrumbs to true.

Integrating with angular-translate

If you’re using angular-translate and want to support translation slugs in breadcrumbs, you can modify the getCrumb function again—this time by incorporating the $translate method into your label logic.

crumble.getCrumb = function(path) {
    var route = crumble.getRoute(path);
    // ...
    var pathLabel = $translate.instant(route.label, crumble.context)
    return {
        path: $interpolate(path)(crumble.context),
        label: $interpolate(pathLabel)(crumble.context),
    };
};

This allows you to define slugs in your route config and have them translated and interpolated automatically when rendered.

$routeProvider
    .when('/', {
        templateUrl: 'views/home.html',
        controller: 'HomeCtrl',
        label: 'HOMEPAGE_TITLE',
    })