Fixed #61

src/App.js

@@ -233,6 +233,7 @@ class AppMenu extends Component {
                             <Link to="/menubar">&#9679; Menubar</Link>
                             <Link to="/contextmenu">&#9679; ContextMenu</Link>
                             <Link to="/panelmenu">&#9679; PanelMenu</Link>
+                            <Link to="/steps">&#9679; Steps</Link>
                         </div>
 
                         <a href="#" onClick={(event) => this.openMenu(event, 7)} className={classNames({ 'active-menuitem': this.state.activeMenu === 7 })}>

src/components/menu/MenuItem.js

@@ -27,7 +27,8 @@ export class MenuItem extends Component{
     }
 
     render() {
-        var styleClass=classNames('ui-menuitem-link ui-corner-all',{'ui-state-disabled':this.item.disabled});
+        var styleClass=classNames('ui-menuitem-link ui-corner-all',{'ui-state-disabled':this.item.disabled},
+            {'ui-menuitem-link-parent':this.item.items && this.props.parentMenu==='SlideMenu'});
         var iconClass=classNames('ui-menuitem-icon fa fa-fw',this.item.icon?this.item.icon:null);
         var rootClass=classNames('ui-submenu-icon fa fa-fw',{' fa-caret-down':this.props.root},{' fa-caret-right':!this.props.root})
         if(this.item.url){

src/components/steps/Steps.css

@@ -0,0 +1,52 @@
+.ui-steps ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.ui-steps .ui-steps-item {
+    float: left;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+.ui-steps.ui-steps-readonly .ui-steps-item {
+    cursor: auto;
+}
+
+.ui-steps .ui-steps-item .ui-menuitem-link {
+    text-decoration: none;
+    display: block;
+    padding: 1em;
+    position: relative;
+    text-align: center;
+}
+
+.ui-steps .ui-steps-item.ui-state-highlight .ui-menuitem-link,
+.ui-steps .ui-steps-item.ui-state-disabled .ui-menuitem-link {
+    cursor: default;
+}
+
+.ui-steps .ui-steps-number {
+    font-size: 200%;
+    display: block;
+}
+
+.ui-steps .ui-steps-title {
+    display: block;
+    white-space: nowrap;
+}
+
+/* Responsive */
+@media (max-width: 40em) {
+    .ui-steps .ui-steps-item .ui-menuitem-link {
+        padding: 0.5em;
+    }
+
+    .ui-steps .ui-steps-item .ui-steps-title {
+        display: none;
+    }
+}
+.ui-steps .ui-steps-item {
+     width: 25%;
+ }

src/components/steps/Steps.js

@@ -0,0 +1,78 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export class Steps extends Component {
+
+    static defaultProps = {
+        model: null,
+        activeIndex:0,
+        readOnly:true,
+        style:null,
+        styleClass:null,
+        activeIndexChange:null
+    };
+
+    static propTypes = {
+        model: PropTypes.array,
+        activeIndex:PropTypes.number,
+        readOnly:PropTypes.bool,
+        style:PropTypes.object,
+        styleClass:PropTypes.string,
+        activeIndexChange:PropTypes.func
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+    itemClick(event, item, i) {
+        if(this.props.readOnly || item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        if(this.props.activeIndexChange){
+            this.props.activeIndexChange({
+                originalEvent: event,
+                index: i
+            });
+        }
+        if(!item.url) {
+            event.preventDefault();
+        }
+
+        if(item.command) {
+            item.command({
+                originalEvent: event,
+                item: item,
+                index: i
+            });
+        }
+    }
+
+    render() {
+        let divClass=classNames('ui-steps ui-widget ui-helper-clearfix',this.props.styleClass,{'ui-steps-readonly':this.props.readonly});
+        return (
+            <div className={divClass} style={this.props.style}>
+                <ul role="tablist">
+                    {this.props.model && this.props.model.map((item,index)=>{
+                        let liClass=classNames('ui-steps-item',{'ui-state-highlight':(index === this.props.activeIndex),'ui-state-default':(index !== this.props.activeIndex),
+                            'ui-state-disabled':(item.disabled || (index !== this.props.activeIndex && this.props.readOnly))})
+                        return <li className={liClass} key={index}>
+                            {item.url?
+                                <a href={item.url||'#'} className="ui-menuitem-link" target={item.target} onClick={event=>this.itemClick(event,item,index)}>
+                                    <span className="ui-steps-number">{index + 1}</span>
+                                    <span className="ui-steps-title">{item.label}</span>
+                                </a>:
+                                <a href={'#'} className="ui-menuitem-link" target={item.target} onClick={event=>this.itemClick(event,item,index)}>
+                                    <span className="ui-steps-number">{index + 1}</span>
+                                    <span className="ui-steps-title">{item.label}</span>
+                                </a>
+                            }
+                        </li>
+                    })}
+                </ul>
+            </div>
+        );
+    }
+}

src/index.js

@@ -75,6 +75,7 @@ import {TieredMenuDemo} from './showcase/tieredmenu/TieredMenuDemo';
 import {MenubarDemo} from './showcase/menubar/MenubarDemo';
 import {ContextMenuDemo} from './showcase/contextmenu/ContextMenuDemo';
 import {PanelMenuDemo} from './showcase/panelmenu/PanelMenuDemo';
+import {StepsDemo} from './showcase/steps/StepsDemo';
 import {OrganizationChartDemo} from './showcase/organizationchart/OrganizationChartDemo';
 import {Router,Route,hashHistory} from 'react-router';
 
@@ -153,6 +154,7 @@ ReactDOM.render(
             <Route path="/menubar" component={MenubarDemo} />
             <Route path="/contextmenu" component={ContextMenuDemo} />
             <Route path="/panelmenu" component={PanelMenuDemo} />
+            <Route path="/steps" component={StepsDemo} />
             <Route path="/setup" component={SetupPage} />
             <Route path="/splitbutton" component={SplitButtonDemo} />
             <Route path="/organizationchart" component={OrganizationChartDemo} />

src/showcase/steps/StepsDemo.css

@@ -0,0 +1,23 @@
+.ui-steps.steps-custom {
+    margin-bottom: 30px;
+}
+
+.ui-steps.steps-custom .ui-steps-item .ui-menuitem-link {
+    height: 10px;
+    padding: 0 1em;
+    overflow: visible;
+}
+
+.ui-steps.steps-custom .ui-steps-item .ui-steps-number {
+    background-color: #0081c2;
+    color: #FFFFFF;
+    display: inline-block;
+    width: 36px;
+    border-radius: 50%;
+    margin-top: -14px;
+    margin-bottom: 10px;
+}
+
+.ui-steps.steps-custom .ui-steps-item .ui-steps-title {
+    color: #555555;
+}