diff --git a/core/src/OC/dialogs.js b/core/src/OC/dialogs.js
index 45e9e99049d..54d81171679 100644
--- a/core/src/OC/dialogs.js
+++ b/core/src/OC/dialogs.js
@@ -1290,11 +1290,13 @@ const Dialogs = {
 		this.$dirTree.empty()
 		var self = this
 
+		self.$dirTree.append('<nav></nav>')
 		self.$dirTree.append(addButton)
 
 		var dir
 		var path = this.$filePicker.data('path')
-		var $template = $('<div data-dir="{dir}" tabindex="0"><a>{name}</a></div>').addClass('crumb')
+		var $template = $('<li data-dir="{dir}" tabindex="0"><a class="{classList}">{name}</a></li>').addClass('crumb')
+		var $breadcrumbs = $('<ul class="breadcrumb"></ul>')
 		if (path) {
 			var paths = path.split('/')
 			$.each(paths, function(index, dir) {
@@ -1302,18 +1304,20 @@ const Dialogs = {
 				if (dir === '') {
 					return false
 				}
-				self.$dirTree.prepend($template.octemplate({
+				$breadcrumbs.append($template.octemplate({
 					dir: paths.join('/') + '/' + dir,
 					name: dir
 				}))
 			})
 		}
-
 		$template.octemplate({
 			dir: '',
 			name: t('core', 'Home'),
-		}, { escapeFunction: null }).prependTo(this.$dirTree)
+			classList: 'icon-home'
+		}, { escapeFunction: null }).addClass('crumb svg crumbhome').prependTo($breadcrumbs)
+
 
+		this.$dirTree.find('nav').prepend($breadcrumbs)
 	},
 	/**
 	 * handle selection made in the tree list
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index 484a6e12d2b..21ac2856d34 100644
--- a/core/templates/filepicker.html
+++ b/core/templates/filepicker.html
@@ -1,5 +1,6 @@
 <div id="{dialog_name}" title="{title}">
-	<span class="dirtree breadcrumb">
+	<span class="dirtree">
+		<nav></nav>
 		<span class="actions creatable"><a href="#" class="icon icon-add button button-add" aria-label="{newtext}"></a>
 			<nav class="menu popovermenu bubble menu-left newFolderMenu">
 				<ul><li>