Implementing breadcrumb navigation in AngularJS

Breadcrumb navigation is a crucial UI/UX feature that helps users understand their location within an application. It improves user experience by allowing easy navigation back to previous pages. In AngularJS, breadcrumb navigation can be implemented using $routeParams, $location, or a custom directive.

This guide will provide a step-by-step explanation of implementing breadcrumb navigation in AngularJS with an example.

---

Step 1: Setting Up the AngularJS Application

First, create a simple AngularJS application structure. We will use the following files:

/breadcrumb-app
  ├── index.html
  ├── app.js
  ├── views/
  │    ├── home.html
  │    ├── about.html
  │    ├── contact.html
  ├── components/
  │    ├── breadcrumb.html
  │    ├── breadcrumbController.js
  │    ├── breadcrumbService.js

Ensure you have included the AngularJS library in your project.

---

Step 2: Setting Up AngularJS Application in app.js

We need to define routes in our AngularJS app.

app.js

var app = angular.module('breadcrumbApp', ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'views/home.html',
            controller: 'HomeController'
        })
        .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'AboutController'
        })
        .when('/contact', {
            templateUrl: 'views/contact.html',
            controller: 'ContactController'
        })
        .otherwise({
            redirectTo: '/'
        });
}]);

Explanation:

• We defined a module named breadcrumbApp.
• Used ngRoute for handling routing.
• Defined routes for Home, About, and Contact pages.

---

Step 3: Creating Controllers for Each Page

HomeController

app.controller('HomeController', function($scope) {
    $scope.pageTitle = "Home";
});

AboutController

app.controller('AboutController', function($scope) {
    $scope.pageTitle = "About";
});

ContactController

app.controller('ContactController', function($scope) {
    $scope.pageTitle = "Contact";
});

Explanation:

• Each controller sets the pageTitle, which we will use in our breadcrumb navigation.

---

Step 4: Creating the Breadcrumb Service

We will use a service to manage the breadcrumb structure dynamically.

breadcrumbService.js

app.service('BreadcrumbService', function() {
    var breadcrumbs = [];

    return {
        setBreadcrumbs: function(crumbs) {
            breadcrumbs = crumbs;
        },
        getBreadcrumbs: function() {
            return breadcrumbs;
        }
    };
});

Explanation:

• BreadcrumbService stores and retrieves breadcrumbs.
• It provides functions to set and get breadcrumb data.

---

Step 5: Creating the Breadcrumb Controller

We will now create a breadcrumb controller that updates breadcrumbs dynamically.

breadcrumbController.js

app.controller('BreadcrumbController', function($scope, $location, BreadcrumbService) {
    $scope.breadcrumbs = [];

    $scope.$on('$routeChangeSuccess', function() {
        var path = $location.path();
        var breadcrumbArray = [];

        if (path === '/') {
            breadcrumbArray = [{ name: 'Home', url: '#' }];
        } else {
            var pathParts = path.split('/');
            var url = '';
            
            breadcrumbArray.push({ name: 'Home', url: '#' });

            for (var i = 1; i < pathParts.length; i++) {
                url += '/' + pathParts[i];
                breadcrumbArray.push({ name: pathParts[i].charAt(0).toUpperCase() + pathParts[i].slice(1), url: '#' + url });
            }
        }

        BreadcrumbService.setBreadcrumbs(breadcrumbArray);
        $scope.breadcrumbs = BreadcrumbService.getBreadcrumbs();
    });
});

Explanation:

• Listens to route change events.
• Splits the URL path to create breadcrumb links.
• Updates breadcrumbs dynamically when the route changes.

---

Step 6: Creating the Breadcrumb Template

Now, let’s create the breadcrumb UI component.

breadcrumb.html

<nav>
    <ul class="breadcrumb">
        <li ng-repeat="crumb in breadcrumbs">
            <a href="{{ crumb.url }}">{{ crumb.name }}</a>
            <span ng-if="!$last"> > </span>
        </li>
    </ul>
</nav>

Explanation:

• Uses ng-repeat to display breadcrumbs.
• Shows navigation links based on the current page.

---

Step 7: Adding Breadcrumb Component in index.html

Finally, include the breadcrumb component in the main HTML.

index.html

<!DOCTYPE html>
<html lang="en" ng-app="breadcrumbApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AngularJS Breadcrumb</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
    <script src="app.js"></script>
    <script src="components/breadcrumbService.js"></script>
    <script src="components/breadcrumbController.js"></script>
    <script src="components/homeController.js"></script>
    <script src="components/aboutController.js"></script>
    <script src="components/contactController.js"></script>
</head>
<body>

    <div ng-controller="BreadcrumbController">
        <ng-include src="'components/breadcrumb.html'"></ng-include>
    </div>

    <div ng-view></div>

</body>
</html>

---

Step 8: Styling the Breadcrumb

To enhance visibility, let’s add CSS styling.

styles.css

.breadcrumb {
    list-style: none;
    padding: 10px;
    background: #f8f9fa;
    display: flex;
}

.breadcrumb li {
    margin-right: 5px;
}

.breadcrumb a {
    text-decoration: none;
    color: #007bff;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

Explanation:

• Styles breadcrumbs for better appearance.
• Uses display: flex to align items properly.

---

Final Output

• Home Page → Home
• About Page → Home > About
• Contact Page → Home > Contact

Whenever the user navigates, the breadcrumb dynamically updates.