Simple category breadcrumb component

app/assets/javascripts/discourse/components/breadcrumbs_component.js

@@ -0,0 +1,5 @@
+Discourse.DiscourseBreadcrumbsComponent = Ember.Component.extend({
+  classNames: ['category-breadcrumb'],
+  tagName: 'ol',
+  parentCategory: Em.computed.alias('category.parentCategory')
+});

app/assets/javascripts/discourse/controllers/list_topics_controller.js

@@ -15,6 +15,10 @@ Discourse.ListTopicsController = Discourse.ObjectController.extend({
 
   latest: Ember.computed.equal('filter', 'latest'),
 
+  categories: function() {
+    return Discourse.Category.list();
+  }.property(),
+
   draftLoaded: function() {
     var draft = this.get('content.draft');
     if (draft) {

app/assets/javascripts/discourse/routes/filtered_list_route.js

@@ -27,8 +27,9 @@ Discourse.FilteredListRoute = Discourse.Route.extend({
   },
 
   setupController: function() {
-    var listController = this.controllerFor('list');
-    var listTopicsController = this.controllerFor('listTopics');
+    var listController = this.controllerFor('list'),
+        listTopicsController = this.controllerFor('listTopics');
+
     listController.set('filterMode', this.filter);
 
     var listContent = listTopicsController.get('model');

app/assets/javascripts/discourse/templates/components/discourse-breadcrumbs.js.handlebars

@@ -0,0 +1,18 @@
+<li>
+  <a href="/">{{title}}</a>
+  <i class='icon icon-caret-right first-caret'></i>
+</li>
+
+{{#if parentCategory}}
+  <li>
+    {{discourse-categorydrop category=parentCategory categories=categories}}
+  </li>
+{{/if}}
+
+{{#if category}}
+  <li>
+    {{discourse-categorydrop category=category}}
+  </li>
+{{/if}}
+
+<div class='clear'></div>

app/assets/javascripts/discourse/templates/components/discourse-categorydrop.js.handlebars

@@ -0,0 +1,4 @@
+{{categoryLink category}}
+{{#if categories}}
+  <button {{action expand}}><i class='icon icon-caret-right'></i></button>
+{{/if}}

app/assets/javascripts/discourse/templates/list/topics.js.handlebars

@@ -10,6 +10,10 @@
         </button>
       {{/if}}
 
+      {{#if category}}
+        {{discourse-breadcrumbs title=Discourse.SiteSettings.title category=category categories=categories}}
+      {{/if}}
+
       <table id='topic-list'>
         <thead>
         <tr>

app/assets/stylesheets/desktop/topic.scss

@@ -2,14 +2,14 @@
 .post-info a {color: #aaa;}
 
 .topic-meta-data-inside {
-  float: right; 
+  float: right;
   margin-top: -22px;
   float: right;
   font-size: 12px;
 }
 
 
-.post-actions { 
+.post-actions {
   color: #bbb;
   text-align: right;
   a {color: #bbb;}
@@ -195,3 +195,46 @@ i {background: #e4f2f8;
   font-size: 15px;
   z-index: 495
 }
+
+ol.category-breadcrumb {
+  list-style: none;
+  margin: 0 0 10px 0;
+  padding: 0;
+
+  .first-caret {
+    margin: 0 3px 0 3px;
+    color: #666;
+    font-size: 13px;
+  }
+
+  li {
+    float: left;
+    margin-right: 5px;
+    border: 1px solid transparent;
+    height: 21px;
+    padding-top: 2px;
+
+    button {
+      background: none;
+      border: 1px solid transparent;
+      padding: 0px 4px;
+      margin: 0;
+      color: #666;
+    }
+
+    &.has-drop:hover {
+      background-color: #eee;
+      border: 1px solid #bbb;
+
+      button {
+        color: black;
+      }
+    }
+  }
+
+  .clear {
+    clear: both;
+  }
+
+
+}