add directive for breadcrumbs

src/Umbraco.Web.UI.Client/src/common/directives/components/umbbreadcrumbs.directive.js

@@ -0,0 +1,21 @@
+(function() {
+  'use strict';
+
+  function BreadcrumbsDirective() {
+
+    var directive = {
+      restrict: 'E',
+      replace: true,
+      templateUrl: 'views/components/umb-breadcrumbs.html',
+      scope: {
+        ancestors: "="
+      }
+    };
+
+    return directive;
+
+  }
+
+  angular.module('umbraco.directives').directive('umbBreadcrumbs', BreadcrumbsDirective);
+
+})();

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -94,6 +94,7 @@
 @import "components/umb-locked-field.less";
 @import "components/umb-tabs.less";
 @import "components/umb-load-indicator.less";
+@import "components/umb-breadcrumbs.less";
 
 @import "components/umb-file-dropzone.less";
 

src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less

@@ -0,0 +1,31 @@
+.umb-breadcrumbs {
+   list-style: none;
+   margin-bottom: 0;
+   margin-left: 0;
+}
+
+.umb-breadcrumbs__ancestor {
+   display: inline-block;
+}
+
+.umb-breadcrumbs__ancestor-link,
+.umb-breadcrumbs__ancestor-text {
+   font-size: 11px;
+   color: #555;
+}
+
+.umb-breadcrumbs__ancestor-link {
+   text-decoration: underline;
+}
+
+.umb-breadcrumbs__ancestor-link:hover {
+   color: #000;
+}
+
+.umb-breadcrumbs__seperator {
+   position: relative;
+   top: 1px;
+   margin-left: 5px;
+   margin-right: 5px;
+   color: #ccc;
+}

src/Umbraco.Web.UI.Client/src/views/components/umb-breadcrumbs.html

@@ -0,0 +1,10 @@
+<ul class="umb-breadcrumbs">
+   <li class="umb-breadcrumbs__ancestor" ng-repeat="ancestor in ancestors">
+
+      <a ng-if="!$last" href="#/content/content/edit/{{ancestor.id}}" class="umb-breadcrumbs__ancestor-link">{{ancestor.name}}</a>
+      <span ng-if="!$last" class="umb-breadcrumbs__seperator">&#47;</span>
+
+      <span class="umb-breadcrumbs__ancestor-text" ng-if="$last">{{ancestor.name}}</span>
+
+   </li>
+</ul>