Fixed #54

src/App.js

@@ -227,6 +227,7 @@ class AppMenu extends Component {
                         <div className={classNames({ 'submenu-hidden': this.state.activeMenu !== 6, 'submenu-visible': this.state.activeMenu === 6 })}>
                             <Link to="/menu">&#9679; Menu</Link>
                             <Link to="/tabmenu">&#9679; TabMenu</Link>
+                            <Link to="/breadcrumb">&#9679; Breadcrumb</Link>
                         </div>
 
                         <a href="#" onClick={(event) => this.openMenu(event, 7)} className={classNames({ 'active-menuitem': this.state.activeMenu === 7 })}>

src/components/breadcrumb/BreadCrumb.js

@@ -0,0 +1,98 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {MenuItem} from '../menu/MenuItem'
+
+export class BreadCrumb extends Component {
+
+    static defaultProps = {
+        model:null,
+        home:null,
+        style:null,
+        styleClass:null
+    };
+
+    static propTypes = {
+        model:PropTypes.array,
+        home:PropTypes.any,
+        style:PropTypes.object,
+        styleClass:PropTypes.string
+    };
+
+    constructor() {
+        super();
+        this.state = {};
+    }
+
+
+    itemClick(event,item){
+        if(item.disabled) {
+            event.preventDefault();
+            return;
+        }
+
+        if(!item.url) {
+            event.preventDefault();
+        }
+
+        if(item.command) {
+            item.command({
+                originalEvent: event,
+                item: item
+            });
+        }
+    }
+
+
+    onHomeClick(event) {
+        if(this.props.home) {
+            this.itemClick(event, this.props.home);
+        }
+    }
+
+    render() {
+        var styleClass=classNames('ui-breadcrumb ui-widget ui-widget-header ui-helper-clearfix ui-corner-all',this.props.styleClass);
+        var homeClass=classNames('ui-menuitem-link',{'ui-state-disabled':this.props.home && this.props.home.disabled})
+
+        var home,right,menu;
+
+        if(this.props.home){
+            home=<li className="ui-breadcrumb-home" >
+                {this.props.home.url?
+                    <a href={this.props.home.url || '#'} className={homeClass} target={this.props.home.target}
+                       onClick={event=>this.itemClick(event,this.props.home)}>
+                        <span className="fa fa-home"></span>
+                    </a>:
+                    <a href='#' className={homeClass} target={this.props.home.target}
+                       onClick={event=>this.itemClick(event,this.props.home)}>
+                        <span className="fa fa-home"></span>
+                    </a>}
+            </li>
+        }
+        else{
+            home=<li className="ui-breadcrumb-home fa fa-home" ></li>
+        }
+        if(this.props.model){
+            right=<li className="ui-breadcrumb-chevron fa fa-chevron-right"></li>
+        }
+        menu=this.props.model && this.props.model.map((item,index)=>{
+            var menuItem=<span key={index}>
+                <li role="menuitem">
+                    <MenuItem items={item} index={index} menu={this} />
+                </li>
+                {this.props.model.length-1!==index && <li className="ui-breadcrumb-chevron fa fa-chevron-right" style={{marginLeft:4,marginRight:4}}></li>}
+            </span>
+                return menuItem;
+        })
+
+        return (
+            <div className={styleClass} style={this.props.style} ref={el=>this.container=el}>
+                <ul>
+                    {home}
+                    {right}
+                    {menu}
+                </ul>
+            </div>
+        );
+    }
+}

src/components/breadcrumb/Breadcrumb.css

@@ -0,0 +1,20 @@
+/** Breadcrumb **/
+.ui-breadcrumb {
+    margin: 0;
+    padding: 0;
+    padding: .3em;
+}
+
+.ui-breadcrumb ul {
+    margin: 0;
+    padding: 0;
+}
+
+.ui-breadcrumb ul li {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.ui-breadcrumb ul li .ui-menuitem-link {
+    text-decoration: none;
+}

src/components/menu/Menu.js

@@ -2,48 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import DomHandler from '../utils/DomHandler';
 import classNames from 'classnames';
-
-export class MenuItem extends Component{
-    static defaultProps = {
-        index:null,
-        items:null,
-        menu:null,
-    };
-
-    static propTypes = {
-        index:PropTypes.number,
-        items:PropTypes.any,
-        menu:PropTypes.any
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {};
-        this.item=this.props.items;
-        this.menu=this.props.menu
-    }
-
-    render() {
-        var styleClass=classNames('ui-menuitem-link ui-corner-all',{'ui-state-disabled':this.item.disabled})
-        var iconClass=classNames('ui-menuitem-icon fa fa-fw',this.item.icon?this.item.icon:null)
-        if(this.item.url){
-            return (
-                <a href={this.item.url || '#'} className={styleClass} target={this.item.target} onClick={event=>this.menu.itemClick(event,this.item)}>
-                    {this.item.icon?<span className={iconClass}></span>:null}
-                    <span className="ui-menuitem-text">{this.item.label}</span>
-                </a>
-            );
-        }
-        else{
-            return (
-                <a className={styleClass} href="#" target={this.item.target} onClick={event=>this.menu.itemClick(event,this.item)}>
-                    {this.item.icon?<span className={iconClass}></span>:null}
-                    <span className="ui-menuitem-text">{this.item.label}</span>
-                </a>
-            );
-        }
-    }
-}
+import {MenuItem} from './MenuItem'
 
 export class Menu extends Component {
 

src/components/menu/MenuItem.js

@@ -0,0 +1,45 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export class MenuItem extends Component{
+    static defaultProps = {
+        index:null,
+        items:null,
+        menu:null,
+    };
+
+    static propTypes = {
+        index:PropTypes.number,
+        items:PropTypes.any,
+        menu:PropTypes.any
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {};
+        this.item=this.props.items;
+        this.menu=this.props.menu
+    }
+
+    render() {
+        var styleClass=classNames('ui-menuitem-link ui-corner-all',{'ui-state-disabled':this.item.disabled})
+        var iconClass=classNames('ui-menuitem-icon fa fa-fw',this.item.icon?this.item.icon:null)
+        if(this.item.url){
+            return (
+                <a href={this.item.url || '#'} className={styleClass} target={this.item.target} onClick={event=>this.menu.itemClick(event,this.item)}>
+                    {this.item.icon?<span className={iconClass}></span>:null}
+                    <span className="ui-menuitem-text">{this.item.label}</span>
+                </a>
+            );
+        }
+        else{
+            return (
+                <a className={styleClass} href="#" target={this.item.target} onClick={event=>this.menu.itemClick(event,this.item)}>
+                    {this.item.icon?<span className={iconClass}></span>:null}
+                    <span className="ui-menuitem-text">{this.item.label}</span>
+                </a>
+            );
+        }
+    }
+}

src/components/tabmenu/TabMenu.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {MenuItem} from '../menu/Menu';
+import {MenuItem} from '../menu/MenuItem'
 
 export class TabMenu extends Component {
 

src/index.js

@@ -64,6 +64,7 @@ import {DataScrollerLoaderDemo} from './showcase/datascroller/DataScrollerLoader
 import {DataScrollerInfiniteDemo} from './showcase/datascroller/DataScrollerInfiniteDemo';
 import {MenuDemo} from './showcase/menu/MenuDemo';
 import {TabMenuDemo} from './showcase/tabmenu/TabMenuDemo';
+import {BreadcrumbDemo} from './showcase/breadcrumb/BreadcrumbDemo';
 import {Router,Route,hashHistory} from 'react-router';
 
 ReactDOM.render(
@@ -130,6 +131,7 @@ ReactDOM.render(
             <Route path="/datascroller/infinite" component={DataScrollerInfiniteDemo} />
             <Route path="/menu" component={MenuDemo} />
             <Route path="/tabmenu" component={TabMenuDemo} />
+            <Route path="/breadcrumb" component={BreadcrumbDemo} />
             <Route path="/setup" component={SetupPage} />
             <Route path="/splitbutton" component={SplitButtonDemo} />
         </Route>