diff --git a/demo-shell-ng2/app/template/single.component.html b/demo-shell-ng2/app/template/single.component.html
index 6da93bc27b..5a0a59db39 100644
--- a/demo-shell-ng2/app/template/single.component.html
+++ b/demo-shell-ng2/app/template/single.component.html
@@ -1,6 +1,6 @@
 <div>
     <div>
-        <file-upload accept="{{accept}}" droppable="{{droppable}}" target="{{target}}" multi="false"  >Choose File</file-upload>
+        <file-upload accept="{{accept}}" droppable="{{droppable}}" target="{{target}}" multi="false"  ></file-upload>
     </div>
     <div >
         <alfresco-file-list></alfresco-file-list>
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 450d05aa62..b37e6375c6 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);
     }
 
-    .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}
+    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}
     .file{
         width: 52px;
         height: 52px;
@@ -88,6 +88,32 @@
         padding: 0px;
     }
 
+    .breadcrumb {
+        font-family: sans-serif;
+        font-size: 12px;
+        padding-left: 11px;
+        height: 28px;
+        width: auto;
+    }
+
+    .folder-breadcrumb-img{
+        float: left;
+        text-align: left;
+        height: 15px;
+        padding: 0px 10px 0px 0px;
+    }
+
+    .folder-breadcrumb-text{
+        float: left;
+        text-align: left;
+        height: 25px;
+        padding: 0px 10px 0px 0px;
+    }
+
+    .folder-breadcrumb-container{
+        float: left;
+    }
+
     paper-dropdown-menu.custom {
         overflow: visible;
         --paper-input-container-label: {
@@ -108,11 +134,22 @@
             display: none;
         };
     }
+
 </style>
 
 
 <dom-module id="alfresco-file-list">
     <template>
+        <div class="breadcrumb">
+            <template is="dom-repeat" items="{{breadcrumbs}}">
+                <div class="folder-breadcrumb-container">
+                    <img class="folder-breadcrumb-img" src="img/folder.svg">
+
+                    <div class="folder-breadcrumb-text">[[item]]</div>
+                </div>
+            </template>
+        </div>
+        <hr>
         <!-- Main List for the items -->
         <iron-list id="itemsList" items="{{data}}" selected-items="{{selectedItems}}" selection-enabled>
             <template>
@@ -179,13 +216,23 @@
                     }
                 },
 
-                goToFolder: function(event) {
-                    var slug= event.model.item.location.site + '/' + event.model.item.location.container + '/' + event.model.item.fileName
-                    console.log('click folder'+ this.baseUrl());
+                goToFolder: function (event) {
+                    this.container = event.model.item.location.container;
+                    var path = event.model.item.location.path !== '/' ? (event.model.item.location.path + '/' ) : '/';
+                    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);
+
+                    console.log('relativePath' + relativePath);
+                    console.log('this.breadcrumbs' + this.breadcrumbs);
                     this.fetchFolderFolder(slug);
                 },
 
                 ready: function() {
+                    this.breadcrumbs = ['documentLibrary'];
                     var initialFolder = 'swsdp/documentLibrary';
                     this.fetchFolderFolder(initialFolder);
                     var self = this;
@@ -203,11 +250,12 @@
                     var xhr = new XMLHttpRequest();
                     xhr.addEventListener("load", (XMLHttpRequestProgressEvent)=>{
                         this.data =JSON.parse(XMLHttpRequestProgressEvent.currentTarget.response).items;
-                    });
+                });
 
                     xhr.addEventListener("error", error);
 
                     xhr.open("GET", (this.baseUrl() + slug));
+                    xhr.withCredentials = true;
                     xhr.setRequestHeader("Authorization", 'Basic ' + btoa('admin:admin'));
                     xhr.send();
                 },
diff --git a/react-app/.idea/workspace.xml b/react-app/.idea/workspace.xml
index 7b427dcbb2..0ae5785971 100644
--- a/react-app/.idea/workspace.xml
+++ b/react-app/.idea/workspace.xml
@@ -56,8 +56,8 @@
       <file leaf-file-name="alfresco-file-list.html" pinned="false" current-in-tab="true">
         <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="175">
-              <caret line="151" column="8" selection-start-line="151" selection-start-column="8" selection-end-line="151" selection-end-column="12" />
+            <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" />
               <folding />
             </state>
           </provider>
@@ -123,7 +123,7 @@
     <ConfirmationsSetting value="0" id="Remove" />
   </component>
   <component name="ProjectView">
-    <navigator currentView="ProjectPane" proportions="" version="1">
+    <navigator proportions="" version="1">
       <flattenPackages />
       <showMembers />
       <showModules />
@@ -136,63 +136,7 @@
       <manualOrder />
       <foldersAlwaysOnTop value="true" />
     </navigator>
-    <panes>
-      <pane id="ProjectPane">
-        <subPane>
-          <PATH>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="react-app" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
-            </PATH_ELEMENT>
-          </PATH>
-          <PATH>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="react-app" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="react-app" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-          </PATH>
-          <PATH>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="react-app" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="react-app" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="webcomponents" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-          </PATH>
-          <PATH>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="react-app" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="react-app" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="webcomponents" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="file-upload" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-          </PATH>
-        </subPane>
-      </pane>
-      <pane id="Scratches" />
-      <pane id="Scope" />
-      <pane id="PackagesPane" />
-    </panes>
+    <panes />
   </component>
   <component name="PropertiesComponent">
     <property name="aspect.path.notification.shown" value="true" />
@@ -623,15 +567,15 @@
       <workItem from="1459961481615" duration="247000" />
       <workItem from="1460028311714" duration="10383000" />
       <workItem from="1460053854983" duration="3523000" />
-      <workItem from="1460113292902" duration="160000" />
+      <workItem from="1460113292902" duration="599000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="30908000" />
+    <option name="totallyTimeSpent" value="31347000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="0" y="23" width="1440" height="803" extended-state="0" />
+    <frame x="0" y="23" width="1440" height="803" extended-state="1" />
     <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" />
@@ -992,8 +936,8 @@
     </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="175">
-          <caret line="151" column="8" selection-start-line="151" selection-start-column="8" selection-end-line="151" selection-end-column="12" />
+        <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" />
           <folding />
         </state>
       </provider>