diff --git a/demo-shell-ng2/webcomponents/alfresco-file-list/src/alfresco-file-list.html b/demo-shell-ng2/webcomponents/alfresco-file-list/src/alfresco-file-list.html
index b37e6375c6..a29ba75423 100644
--- a/demo-shell-ng2/webcomponents/alfresco-file-list/src/alfresco-file-list.html
+++ b/demo-shell-ng2/webcomponents/alfresco-file-list/src/alfresco-file-list.html
@@ -55,10 +55,10 @@
         top: calc(50% - 8px);
     }
 
-    ul { list-style-type: none; overflow: hidden;  margin:10px}
-    ul li div.text{ float:left; text-align: left;height: 55px }
-    ul li div.folder-container{ float:left; width: 70px;text-align: left ;height: 55px}
-    ul li:hover { background: #eeeeee; height: 55px}
+    .iron-list ul { list-style-type: none; overflow: hidden;  margin:10px}
+    .iron-list ul li div.text{ float:left; text-align: left;height: 55px }
+    .iron-list ul li div.folder-container{ float:left; width: 70px;text-align: left ;height: 55px}
+    .iron-list ul li:hover { background: #eeeeee; height: 55px}
     .file{
         width: 52px;
         height: 52px;
@@ -142,7 +142,7 @@
     <template>
         <div class="breadcrumb">
             <template is="dom-repeat" items="{{breadcrumbs}}">
-                <div class="folder-breadcrumb-container">
+                <div on-click="goToFolderBreadcrumbs" data-name="[[item]]" class="folder-breadcrumb-container">
                     <img class="folder-breadcrumb-img" src="img/folder.svg">
 
                     <div class="folder-breadcrumb-text">[[item]]</div>
@@ -222,12 +222,14 @@
                     var relativePath = this.container + path + event.model.item.fileName;
                     var slug = event.model.item.location.site + '/' + relativePath;
                     this.breadcrumbs = relativePath.split('/');
-                    console.log('event.model.item.location.path' +  event.model.item.location.path);
-                    console.log('event.model.item.fileName' +  event.model.item.fileName);
-                    console.log('event.model.item.location.site' +  event.model.item.location.site);
+                    this.fetchFolderFolder(slug);
+                },
 
-                    console.log('relativePath' + relativePath);
-                    console.log('this.breadcrumbs' + this.breadcrumbs);
+                goToFolderBreadcrumbs: function (event) {
+                    var currentRelative = event.model.__data__.item;
+                    var currentRelativeIndexInSlug = this.lastSlug.indexOf(currentRelative);
+                    var slug = this.lastSlug.substr(0, currentRelativeIndexInSlug + currentRelative.length);
+                    this.breadcrumbs = slug.substr(6,slug.length).split('/');
                     this.fetchFolderFolder(slug);
                 },
 
@@ -237,7 +239,7 @@
                     this.fetchFolderFolder(initialFolder);
                     var self = this;
                     if(document.querySelector("#alfresco-app")) {
-                        document.querySelector("#alfresco-app").uploadedSignal = function (e, detail, sender) {
+                        document.querySelector("#alfresco-app").uploadedSignal = function () {
                             self.fetchFolderFolder(initialFolder);
                         };
                     }
@@ -254,6 +256,7 @@
 
                     xhr.addEventListener("error", error);
 
+                    this.lastSlug = slug;
                     xhr.open("GET", (this.baseUrl() + slug));
                     xhr.withCredentials = true;
                     xhr.setRequestHeader("Authorization", 'Basic ' + btoa('admin:admin'));
diff --git a/react-app/.idea/workspace.xml b/react-app/.idea/workspace.xml
index 0ae5785971..9217b9b2d6 100644
--- a/react-app/.idea/workspace.xml
+++ b/react-app/.idea/workspace.xml
@@ -26,7 +26,7 @@
       <file leaf-file-name="index.html" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/index.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="262">
+            <state relative-caret-position="840">
               <caret line="56" column="0" selection-start-line="56" selection-start-column="0" selection-end-line="56" selection-end-column="0" />
               <folding />
             </state>
@@ -53,20 +53,20 @@
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="alfresco-file-list.html" pinned="false" current-in-tab="true">
+      <file leaf-file-name="alfresco-file-list.html" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/webcomponents/alfresco-file-list/src/alfresco-file-list.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="55">
-              <caret line="143" column="61" selection-start-line="0" selection-start-column="0" selection-end-line="269" selection-end-column="0" />
+            <state relative-caret-position="325">
+              <caret line="272" column="0" selection-start-line="272" selection-start-column="0" selection-end-line="272" selection-end-column="0" />
               <folding />
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="file-upload.html" pinned="false" current-in-tab="false">
+      <file leaf-file-name="file-upload.html" pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/webcomponents/file-upload/file-upload.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="7710">
+            <state relative-caret-position="352">
               <caret line="514" column="49" selection-start-line="514" selection-start-column="49" selection-end-line="514" selection-end-column="49" />
               <folding />
             </state>
@@ -568,14 +568,15 @@
       <workItem from="1460028311714" duration="10383000" />
       <workItem from="1460053854983" duration="3523000" />
       <workItem from="1460113292902" duration="599000" />
+      <workItem from="1460114672525" duration="108000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="31347000" />
+    <option name="totallyTimeSpent" value="31455000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="0" y="23" width="1440" height="803" extended-state="1" />
+    <frame x="0" y="23" width="1440" height="803" extended-state="0" />
     <editor active="true" />
     <layout>
       <window_info id="Palette" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
@@ -640,6 +641,46 @@
     <watches-manager />
   </component>
   <component name="editorHistoryManager">
+    <entry file="file://$PROJECT_DIR$/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="840">
+          <caret line="56" column="0" selection-start-line="56" selection-start-column="0" selection-end-line="56" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/helloworld.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="180">
+          <caret line="12" column="0" selection-start-line="12" selection-start-column="0" selection-end-line="12" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/css/style.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="15">
+          <caret line="1" column="45" selection-start-line="1" selection-start-column="0" selection-end-line="2" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/webcomponents/alfresco-file-list/src/alfresco-file-list.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/webcomponents/file-upload/file-upload.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="7710">
+          <caret line="514" column="49" selection-start-line="514" selection-start-column="49" selection-end-line="514" selection-end-column="49" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="0">
@@ -754,7 +795,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="420">
           <caret line="28" column="0" selection-start-line="28" selection-start-column="0" selection-end-line="28" selection-end-column="0" />
-          <folding />
         </state>
       </provider>
     </entry>
@@ -793,7 +833,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="420">
           <caret line="28" column="0" selection-start-line="28" selection-start-column="0" selection-end-line="28" selection-end-column="0" />
-          <folding />
         </state>
       </provider>
     </entry>
@@ -891,7 +930,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="525">
           <caret line="35" column="19" selection-start-line="35" selection-start-column="19" selection-end-line="35" selection-end-column="19" />
-          <folding />
         </state>
       </provider>
     </entry>
@@ -918,17 +956,9 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/webcomponents/file-upload/file-upload.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="7710">
-          <caret line="514" column="49" selection-start-line="514" selection-start-column="49" selection-end-line="514" selection-end-column="49" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="262">
+        <state relative-caret-position="840">
           <caret line="56" column="0" selection-start-line="56" selection-start-column="0" selection-end-line="56" selection-end-column="0" />
           <folding />
         </state>
@@ -936,8 +966,16 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/webcomponents/alfresco-file-list/src/alfresco-file-list.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="55">
-          <caret line="143" column="61" selection-start-line="0" selection-start-column="0" selection-end-line="269" selection-end-column="0" />
+        <state relative-caret-position="325">
+          <caret line="272" column="0" selection-start-line="272" selection-start-column="0" selection-end-line="272" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/webcomponents/file-upload/file-upload.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="352">
+          <caret line="514" column="49" selection-start-line="514" selection-start-column="49" selection-end-line="514" selection-end-column="49" />
           <folding />
         </state>
       </provider>
diff --git a/react-app/webcomponents/alfresco-file-list/src/alfresco-file-list.html b/react-app/webcomponents/alfresco-file-list/src/alfresco-file-list.html
index b37e6375c6..a29ba75423 100644
--- a/react-app/webcomponents/alfresco-file-list/src/alfresco-file-list.html
+++ b/react-app/webcomponents/alfresco-file-list/src/alfresco-file-list.html
@@ -55,10 +55,10 @@
         top: calc(50% - 8px);
     }
 
-    ul { list-style-type: none; overflow: hidden;  margin:10px}
-    ul li div.text{ float:left; text-align: left;height: 55px }
-    ul li div.folder-container{ float:left; width: 70px;text-align: left ;height: 55px}
-    ul li:hover { background: #eeeeee; height: 55px}
+    .iron-list ul { list-style-type: none; overflow: hidden;  margin:10px}
+    .iron-list ul li div.text{ float:left; text-align: left;height: 55px }
+    .iron-list ul li div.folder-container{ float:left; width: 70px;text-align: left ;height: 55px}
+    .iron-list ul li:hover { background: #eeeeee; height: 55px}
     .file{
         width: 52px;
         height: 52px;
@@ -142,7 +142,7 @@
     <template>
         <div class="breadcrumb">
             <template is="dom-repeat" items="{{breadcrumbs}}">
-                <div class="folder-breadcrumb-container">
+                <div on-click="goToFolderBreadcrumbs" data-name="[[item]]" class="folder-breadcrumb-container">
                     <img class="folder-breadcrumb-img" src="img/folder.svg">
 
                     <div class="folder-breadcrumb-text">[[item]]</div>
@@ -222,12 +222,14 @@
                     var relativePath = this.container + path + event.model.item.fileName;
                     var slug = event.model.item.location.site + '/' + relativePath;
                     this.breadcrumbs = relativePath.split('/');
-                    console.log('event.model.item.location.path' +  event.model.item.location.path);
-                    console.log('event.model.item.fileName' +  event.model.item.fileName);
-                    console.log('event.model.item.location.site' +  event.model.item.location.site);
+                    this.fetchFolderFolder(slug);
+                },
 
-                    console.log('relativePath' + relativePath);
-                    console.log('this.breadcrumbs' + this.breadcrumbs);
+                goToFolderBreadcrumbs: function (event) {
+                    var currentRelative = event.model.__data__.item;
+                    var currentRelativeIndexInSlug = this.lastSlug.indexOf(currentRelative);
+                    var slug = this.lastSlug.substr(0, currentRelativeIndexInSlug + currentRelative.length);
+                    this.breadcrumbs = slug.substr(6,slug.length).split('/');
                     this.fetchFolderFolder(slug);
                 },
 
@@ -237,7 +239,7 @@
                     this.fetchFolderFolder(initialFolder);
                     var self = this;
                     if(document.querySelector("#alfresco-app")) {
-                        document.querySelector("#alfresco-app").uploadedSignal = function (e, detail, sender) {
+                        document.querySelector("#alfresco-app").uploadedSignal = function () {
                             self.fetchFolderFolder(initialFolder);
                         };
                     }
@@ -254,6 +256,7 @@
 
                     xhr.addEventListener("error", error);
 
+                    this.lastSlug = slug;
                     xhr.open("GET", (this.baseUrl() + slug));
                     xhr.withCredentials = true;
                     xhr.setRequestHeader("Authorization", 'Basic ' + btoa('admin:admin'));
diff --git a/web-components/alfresco-file-list/src/alfresco-file-list.html b/web-components/alfresco-file-list/src/alfresco-file-list.html
index 54bcdae334..761a5371bf 100644
--- a/web-components/alfresco-file-list/src/alfresco-file-list.html
+++ b/web-components/alfresco-file-list/src/alfresco-file-list.html
@@ -55,10 +55,10 @@
         top: calc(50% - 8px);
     }
 
-    ul { list-style-type: none; overflow: hidden;  margin:10px}
-    ul li div.text{ float:left; text-align: left;height: 55px }
-    ul li div.folder-container{ float:left; width: 70px;text-align: left ;height: 55px}
-    ul li:hover { background: #eeeeee; height: 55px}
+    .iron-list ul { list-style-type: none; overflow: hidden;  margin:10px}
+    .iron-list ul li div.text{ float:left; text-align: left;height: 55px }
+    .iron-list ul li div.folder-container{ float:left; width: 70px;text-align: left ;height: 55px}
+    .iron-list ul li:hover { background: #eeeeee; height: 55px}
     .file{
         width: 52px;
         height: 52px;