Index: /Dev/branches/rest-dojo-ui/client/mockup.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/mockup.html	(revision 339)
+++ /Dev/branches/rest-dojo-ui/client/mockup.html	(revision 340)
@@ -80,7 +80,7 @@
                         </div>
                         <div data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
-                            <div data-dojo-type="dijit.layout.ContentPane" title="Category One">
-                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
-                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
+                            <div data-dojo-type="dijit.layout.ContentPane" title="Category One, this is a very long title to see how overflow works. This part is cut off because it passes two lines at 200px wide.">
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', modifiers:'green'"></div>
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', modifiers: 'purple'"></div>
                             </div>
                             <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
Index: /Dev/branches/rest-dojo-ui/client/rft/content.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/content.js	(revision 339)
+++ /Dev/branches/rest-dojo-ui/client/rft/content.js	(revision 340)
@@ -17,5 +17,5 @@
  * The event onLeave is called before navigating to another page. If false is 
  * returned from this function, the navigation will be cancelled. You can use 
- * this e.g. to ask confirmation of changed values are not saved.
+ * this e.g. to ask confirmation if changed values are not saved.
  */
 define(['dojo/_base/declare','dojo/_base/connect','dojo/_base/xhr','dojo/_base/json',
Index: /Dev/branches/rest-dojo-ui/client/rft/css/layout.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 339)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 340)
@@ -62,5 +62,5 @@
 
 /* Breadcrumbs */
-.breadcrumbs {
+.claro .breadcrumbs {
     float: left;
     clear: left;
@@ -70,18 +70,21 @@
     line-height: 16px;
 }
-.breadcrumb {
+.claro .breadcrumbs .breadcrumb {
     color: #999999;
     font-size: 13px;
 }
-.breadcrumbCurrent {
+.claro .breadcrumbs .breadcrumb.breadcrumbCurrent {
     color: #ffffff;
     font-size: 14px;
 }
+.claro .breadcrumbs .breadcrumb.breadcrumbHover {
+    color: #0072bc;
+}
 
 /* Content */
-.dijitContentPane.page {
-    padding: 0;
-}
-.content.dijitContentPane {
+.claro .dijitContentPane.page {
+    padding: 0;
+}
+.claro .content.dijitContentPane {
     display: block;
     clear: both;
@@ -102,5 +105,5 @@
         );
 }
-.content.dijitContentPane .dijitBorderContainer {
+.claro .content.dijitContentPane .dijitBorderContainer {
     padding: 2px;
 }
@@ -138,17 +141,20 @@
 }
 
-
 /* Tabs */
 .claro .dijitTabContainerLeft-tabs {
     border: none;
+    padding: 4px 16px 4px 4px;
 }
 .claro .dijitTabContainerLeft-tabs .dijitTab {
     margin: 4px 0;
     width: 200px;
-    height: 30px;
+    min-height: 30px;
 }
 .claro .dijitTab {
+    padding: 2px 8px;
     color: #999999;
     border: 1px solid #999999;
+    white-space: normal;
+    overflow: hidden;
     transition: all 0.3s;
     -moz-transition: all 0.3s;
@@ -156,4 +162,10 @@
     -o-transition: all 0.3s;
 }
+.claro .dijitTabContainerLeft-tabs .dijitTab .dijitTabContent {
+    height: 48px;
+    line-height: 24px;
+    width: 190px;
+}
+
 .claro .dijitTab.dijitTabHover {
     color: #ffffff;
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/Breadcrumbs.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/Breadcrumbs.js	(revision 340)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/Breadcrumbs.js	(revision 340)
@@ -0,0 +1,97 @@
+define([
+    'dojo/_base/declare',
+    'dojo/_base/array',
+    'dijit/form/Button',
+    'dojo/dom-class',
+    'dojo/topic',
+    'dijit/_WidgetBase'
+    ], function(declare, baseArray, Button, domClass, topic, _WidgetBase){
+        return declare('rft.ui.Breadcrumbs', [_WidgetBase], {
+            _crumbs: [],
+            
+            _last: function(){
+                return this._crumbs[this._crumbs.length-1];
+            },
+            _getIndexOf: function(label) {
+                dojo.forEach(this._crumbs, function(crumb, index){
+                    if (crumb.label == label) {
+                        return index;
+                    }
+                }, this);
+                return -1;
+            },
+            
+            addCrumb: function(label, path) {
+                this._crumbs.push({
+                    label: label, 
+                    path:path
+                });
+            },
+            _removeAfter: function(index) {
+                var removals = this._crumbs.slice(index+1);
+                this._crumbs = this._crumbs.slice(0, index+1);
+                dojo.forEach(removals, function(removal){
+                    removal.widget.destroyRecursive(false); // boolean "keepDOMnode"
+                }, this);
+                this._highlightLast();
+            },
+            
+            _highlightLast: function() {
+                domClass.add(this._last().widget, "breadcrumbCurrent");
+            },
+            _unhighlightLast: function() {
+                domClass.remove(this._last(), "breadcrumbCurrent");
+            },
+            
+            _changeTo: function(label, path) {
+                // TODO: Differentiate between navigating backwards and sideways/forward!
+                var index = baseArray.indexOf({label:label , path:path});
+                //var index = this._getIndexOf(label);  // Use this if passing path as an argument is not possible!
+                if (index >= 0) this._removeAfter(index);
+                this._addCrumb(label, path);
+                this._createBreadcrumbs();
+            },
+            
+            _createBreadcrumb: function(label, path) {
+                return new Button({
+                    baseClass: "breadcrumb",
+                    label: label,
+                    showlabel: true,
+                    iconClass: "dijitNoIcon",
+                    onClick: lang.hitch(this, function(){
+                        rft.api.loadPage(path);  // TODO: fix this call!
+                    })
+                });
+            },
+            _createBreadcrumbs: function() {
+                dojo.forEach(this._crumbs, function(crumb, index){
+                    if (!crumb.widget) {
+                        crumb.widget = this._createBreadcrumb(crumb.label, crumb.path);
+                    }
+                }, this);
+                this._highlightLast();
+            },
+            startup: function() {
+                // TODO: start page crumb creation?
+                this._createBreadCrumbs();
+                this._setupEvents();
+                this.inherited(arguments);
+            },
+            _setupEvents: function() {
+            // TODO: Bind changeTo() listener to an "onLoadPage" event exposed by rft.api!
+            topic.subscribe("rft/content/goTo", this._changeTo(label, path));
+            }
+        });
+    });
+    
+    /*  Breadcrumbs system, which automatically generates styled buttons in the topBar.
+     *  Updates are triggered through a "changePage" subscription to "rft/connect/goTo" (method that loads pages in rft.connect.js)
+     *
+     * Todo: Startup() does not handle initial creation well. No initial breadcrumb is created on page load. What happens when I refresh the page, do all previous crumbs disappear?
+     * Todo: Pages should have a label/name besides the path, for display in the breadcrumbs bar. Perhaps the page main title? (Generate this header dynamically?)
+     * Todo: Put connect.publish("rft/content/goTo", args); call in rft/content, to trigger breadcrumbs updates
+     *      This method uses path and 'args'(?) instead of label and path, change terminology accordingly?
+     * Todo: breadcrumbs do not have context yet, unless we can somehow create that context from the path. Split path at "/" char, lookup label/title for each step?
+     *      (See before!)
+     * 
+     */
