Exemple of an AngularJS breadcrumbs directive for use with ui-router

breacrumb.js

var breadcrumbs = function($state, $stateParams) {
    return {
        restrict: 'E',
        templateUrl: '/path/to/breadcrumbs.html',
        replace: true,
        compile: function(tElement, tAttrs) {
            return function($scope, $elem, $attr) {
                $scope.show = function(state){
                    if(!angular.isDefined(state.data)){
                        return false;
                    }
                    else if(!angular.isDefined(state.data.breadcrumbs)){
                        return false;
                    }
                    return true;
                };
            }
        }
    };
};

app.directive('breadcrumbs', ['$state', '$stateParams', breadcrumbs]);

breadcrumbs.html

<ul class="breadcrumbs">
    <li data-ng-repeat="state in $state.$current.path | filter:show" data-ng-class="{ 'current': $last }">
        <a data-ng-if="!$last" class="breadcrumb" href="{{ state.url.format($stateParams) }}">{{ state.data.title }}</a>
        <span data-ng-if="$last" class="breadcrumb">{{ state.data.title }}</span>
    </li>
</ul>

example-state.js

var config = function ($stateProvider) {

$stateProvider
    // Ignored
    .state('index', {
        url: "/",
        abstract: true
        /***/
    })
    .state('index.overview', {
        url: '', // Inherit
        views: {
            /***/
        },
        data : {
            title : 'Overview',
            breadcrumbs : true
        }
    })
    .state('index.overview.children', {
        url: '/overview/:id',
        views: {
            /***/
        },
        data : {
            title : 'Children',
            breadcrumbs : true
        }
    });

};

angular.module('app', [/***/]).config(['$stateProvider', '$urlRouterProvider', config]);

index.html

<!-- used with gridism : https://github.com/cobyism/gridism -->
<div class="grid">
    <div class="unit whole">
        <div class="block-content">

            <breadcrumbs></breadcrumbs>
            <!-- /End .breadcrumbs -->

        </div><!-- /End .block-content -->
    </div>
</div>
<!-- /End .grid -->

style.css

.breadcrumbs {
  border: 1px solid #e0e0e0;
  background-color: #FFFFFF;
  line-height: 1.5em;
  overflow: hidden;
}
.breadcrumbs > li {
  background-color: #f6f6f6;
  float: left;
  list-style: none outside none;
  padding: 0.35em 1.5em 0.35em 1em;
}
.breadcrumbs li:first-child > .breadcrumb:before,
.breadcrumbs li:first-child > .breadcrumb:after {
  display: none;
}
.breadcrumbs .breadcrumb {
  color: #a2a2a2;
  font-size: 0.75em;
  font-weight: bold;
  position: relative;
}
.breadcrumbs .breadcrumb:hover {
  color: #555555;
}
.breadcrumbs .breadcrumb:before,
.breadcrumbs .breadcrumb:after {
  border-color: transparent transparent transparent #e0e0e0;
  border-image: none;
  border-style: outset outset outset solid;
  border-width: 25px;
  content: "";
  height: 0;
  left: -40px;
  pointer-events: none;
  position: absolute;
  top: -1.5em;
  width: 0;
}
.breadcrumbs .breadcrumb:after {
  border-left-color: #f6f6f6;
}
.breadcrumbs .breadcrumb:before {
  left: -38px;
}
.breadcrumbs .current {
  background-color: #FFFFFF;
  margin-left: -15px;
}
.breadcrumbs .current .breadcrumb {
  color: #555555;
  left: 20px;
  overflow: hidden;
}