+ Breadcrumbs component; - Breadcrumbs directive

src/client/app.js

@@ -3,6 +3,7 @@
  **/
 
 import MainMenu from './components/MainMenu';
+import Breadcrumbs from './components/Breadcrumbs';
 import Document from './components/Document';
 import Award from './components/Award';
 import GalleryItem from './components/GalleryItem';
@@ -92,7 +93,6 @@ app.run(($location, $rootScope, $http) => {
     api,
     IOService,
     MenuService,
-    require('./ui/breadcrumbs'),
     require('./ui/timeline'),
     require('./filters/strip'),
     require('./filters/remove-hashtags'),
@@ -103,6 +103,7 @@ app.run(($location, $rootScope, $http) => {
     require('./controllers/ContactsController'),
     require('./controllers/CopyrightController'),
     MainMenu,
+    Breadcrumbs,
     Document,
     Award,
     GalleryItem,

src/client/components/Breadcrumbs.js

@@ -0,0 +1,10 @@
+import template from '../../templates/components/breadcrumbs.html';
+
+export default function (app) {
+    app.component('breadcrumbs', {
+        bindings: {
+            crumbs: '='
+        },
+        template: template
+    });
+};

src/client/ui/breadcrumbs.js

@@ -1,11 +0,0 @@
-module.exports = function(app) {
-    app.directive('breadcrumbs', function () {
-        return {
-            restrict: 'E',
-            templateUrl: '/views/breadcrumbs.html',
-            scope: {
-                crumbs: '='
-            }
-        };
-    });
-};

src/templates/components/breadcrumbs.html

@@ -1,6 +1,6 @@
 <nav class="breadcrumbs">
     <ul>
-        <li ng-repeat="i in crumbs">
+        <li ng-repeat="i in $ctrl.crumbs">
             <a ng-show="i.url" href="{{i.url}}">{{i.name}}</a>
             <span ng-hide="i.url">{{i.name}}</span>
         </li>