diff --git a/res/css/_components.scss b/res/css/_components.scss
index 80add0b1ad..dbf6e7b8b9 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -127,6 +127,7 @@
@import "./views/rooms/_PinnedEventsPanel.scss";
@import "./views/rooms/_PresenceLabel.scss";
@import "./views/rooms/_ReplyPreview.scss";
+@import "./views/rooms/_RoomBreadcrumbs.scss";
@import "./views/rooms/_RoomDropTarget.scss";
@import "./views/rooms/_RoomHeader.scss";
@import "./views/rooms/_RoomList.scss";
diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss
new file mode 100644
index 0000000000..ba4aec3b6e
--- /dev/null
+++ b/res/css/views/rooms/_RoomBreadcrumbs.scss
@@ -0,0 +1,54 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RoomBreadcrumbs {
+ overflow-x: auto;
+ position: relative;
+ height: 32px;
+ margin: 8px;
+ margin-bottom: 0;
+
+ overflow-x: hidden;
+ display: flex;
+ flex-direction: row;
+
+ > * {
+ margin-left: 4px;
+ }
+
+ &::after {
+ content: "";
+ position: absolute;
+ width: 15px;
+ top: 0;
+ right: 0;
+ height: 100%;
+ background: linear-gradient(to right, rgba(242,245,248,0), rgba(242,245,248,1));
+ }
+
+ .mx_RoomBreadcrumbs_animate {
+ margin-left: 0;
+ transition: transform 0.3s, width 0.3s;
+ width: 32px;
+ transform: scale(1);
+ }
+
+ .mx_RoomBreadcrumbs_preAnimate {
+ width: 0;
+ transform: scale(0);
+ }
+}
+
diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index bd49f8acd4..000195d349 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -182,6 +182,7 @@ const LeftPanel = React.createClass({
render: function() {
const RoomList = sdk.getComponent('rooms.RoomList');
+ const RoomBreadcrumbs = sdk.getComponent('rooms.RoomBreadcrumbs');
const TagPanel = sdk.getComponent('structures.TagPanel');
const CustomRoomTagPanel = sdk.getComponent('structures.CustomRoomTagPanel');
const TopLeftMenuButton = sdk.getComponent('structures.TopLeftMenuButton');
@@ -215,12 +216,17 @@ const LeftPanel = React.createClass({
onCleared={ this.onSearchCleared }
collapsed={this.props.collapsed} />);
+ let breadcrumbs;
+ if (SettingsStore.isFeatureEnabled("feature_room_breadcrumbs")) {
+ breadcrumbs = (