diff --git a/src/App.js b/src/App.js
index f01aca2c46..61c774da8c 100644
--- a/src/App.js
+++ b/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 })}>
diff --git a/src/components/menu/MenuItem.js b/src/components/menu/MenuItem.js
index 09ad12168a..52d960cbab 100644
--- a/src/components/menu/MenuItem.js
+++ b/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){
diff --git a/src/components/steps/Steps.css b/src/components/steps/Steps.css
new file mode 100644
index 0000000000..cefababea6
--- /dev/null
+++ b/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%;
+ }
\ No newline at end of file
diff --git a/src/components/steps/Steps.js b/src/components/steps/Steps.js
new file mode 100644
index 0000000000..ccc362e6d2
--- /dev/null
+++ b/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>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 9b400622a3..622a9a13da 100644
--- a/src/index.js
+++ b/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} />
diff --git a/src/showcase/steps/StepsDemo.css b/src/showcase/steps/StepsDemo.css
new file mode 100644
index 0000000000..7f628541cc
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/showcase/steps/StepsDemo.js b/src/showcase/steps/StepsDemo.js
new file mode 100644
index 0000000000..5f75b9bedc
--- /dev/null
+++ b/src/showcase/steps/StepsDemo.js
@@ -0,0 +1,310 @@
+import React, {Component} from 'react';
+import {Link} from 'react-router';
+import {Steps} from '../../components/steps/Steps';
+import {TabView,TabPanel} from '../../components/tabview/TabView';
+import {CodeHighlight} from '../../components/codehighlight/CodeHighlight';
+import {Growl} from "../../components/growl/Growl";
+import "./StepsDemo.css"
+
+export class StepsDemo extends Component {
+
+    constructor() {
+        super();
+        this.state = {activeIndex:1};
+    }
+
+    render() {
+        var items=[
+            {
+                label: 'Personal',
+                command: (event) => {
+                    this.setState({activeIndex:0, messages:[{severity:'info', summary:'First Step', detail: event.item.label}]});
+                }
+            },
+            {
+                label: 'Seat',
+                command: (event) => {
+                    this.setState({activeIndex:1, messages:[{severity:'info', summary:'Seat Selection', detail: event.item.label}]});
+                }
+            },
+            {
+                label: 'Payment',
+                command: (event) => {
+                    this.setState({activeIndex:2, messages:[{severity:'info', summary:'Pay with CC', detail: event.item.label}]});
+                }
+            },
+            {
+                label: 'Confirmation',
+                command: (event) => {
+                    this.setState({activeIndex:3, messages:[{severity:'info', summary:'Last Step', detail: event.item.label}]});
+                }
+            }
+        ];
+        return (
+            <div>
+                <div className="content-section">
+                    <div className="feature-intro">
+                        <h1>Steps</h1>
+                        <p>Steps components is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.</p>
+                    </div>
+                </div>
+                <div className="content-section implementation">
+                    <Growl value={this.state.messages}/>
+                    <h3>Basic</h3>
+                    <Steps model={items}/>
+
+                    <h3>Clickable</h3>
+                    <Steps model={items} activeIndex={this.state.activeIndex} readOnly={false}/>
+
+                    <h3>Custom Style</h3>
+                    <Steps model={items} styleClass="steps-custom"/>
+                </div>
+
+                <StepsDoc/>
+
+            </div>
+        );
+    }
+}
+
+class StepsDoc extends Component {
+    render() {
+        return (
+            <div className="content-section source">
+                <TabView effect="fade">
+                    <TabPanel header="Documentation">
+                        <h3>Import</h3>
+                        <CodeHighlight className="language-javascript">
+                            {`
+import {Steps} from 'primereact/components/steps/Steps';
+
+`}</CodeHighlight>
+                        <h3>MenuItem API</h3>
+                        <p>Steps uses the common menu item api to define its items, visit <Link to="/menu"> Menu </Link> for details.</p>
+
+                        <h3>Getting Started</h3>
+                        <p>Component is defined using the Password element .</p>
+                        <CodeHighlight className="language-markup">
+                            {`
+<Steps model={items}/>
+
+`}
+                        </CodeHighlight>
+
+                        <h3>Readonly</h3>
+                        <p>Items are readonly by default, if you'd like to make them interactive then disable readonly.</p>
+                        <CodeHighlight className="language-markup">
+                            {`
+<Steps model={items} readOnly={false}/>
+
+`}
+                        </CodeHighlight>
+                        <h3>Attributes</h3>
+                        <div className="doc-tablewrapper">
+                            <table className="doc-table">
+                                <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Type</th>
+                                    <th>Default</th>
+                                    <th>Description</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr>
+                                    <td>model</td>
+                                    <td>array</td>
+                                    <td>null</td>
+                                    <td>An array of menuitems.</td>
+                                </tr>
+                                <tr>
+                                    <td>activeIndex</td>
+                                    <td>number</td>
+                                    <td>0</td>
+                                    <td>Index of the active item.</td>
+                                </tr>
+                                <tr>
+                                    <td>readonly</td>
+                                    <td>boolean</td>
+                                    <td>true</td>
+                                    <td>Whether the items are clickable or not.</td>
+                                </tr>
+                                <tr>
+                                    <td>style</td>
+                                    <td>string</td>
+                                    <td>null</td>
+                                    <td>Inline style of the component.</td>
+                                </tr>
+                                <tr>
+                                    <td>styleClass</td>
+                                    <td>string</td>
+                                    <td>null</td>
+                                    <td>Style class of the component.</td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <h3>Events</h3>
+                        <div className="doc-tablewrapper">
+                            <table className="doc-table">
+                                <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Parameters</th>
+                                    <th>Description</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr>
+                                    <td>activeIndexChange</td>
+                                    <td>index: Index of the active step item</td>
+                                    <td>Callback to invoke when the new step is selected.</td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <h3>Styling</h3>
+                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
+                        <div className="doc-tablewrapper">
+                            <table className="doc-table">
+                                <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Element</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr>
+                                    <td>ui-steps</td>
+                                    <td>Container element.</td>
+                                </tr>
+                                <tr>
+                                    <td>ui-steps-item</td>
+                                    <td>Menuitem element.</td>
+                                </tr>
+                                <tr>
+                                    <td>ui-steps-number</td>
+                                    <td>Number of menuitem.</td>
+                                </tr>
+                                <tr>
+                                    <td>ui-steps-title</td>
+                                    <td>Label of menuitem.</td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+
+                        <h3>Dependencies</h3>
+                        <p>None.</p>
+                    </TabPanel>
+
+                    <TabPanel header="Source">
+                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/steps" className="btn-viewsource" target="_blank">
+                            <i className="fa fa-github"></i>
+                            <span>View on GitHub</span>
+                        </a>
+
+                        <p>StepsDemo.css</p>
+                        <CodeHighlight className="language-javascript">
+                            {`
+.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;
+}
+                        `}
+                        </CodeHighlight>
+                        <CodeHighlight className="language-javascript">
+                            {`
+export class StepsDemo extends Component {
+
+    constructor() {
+        super();
+        this.state = {activeIndex:1};
+    }
+
+    render() {
+        var items=[
+            {
+                label: 'Personal',
+                command: (event) => {
+                    this.state.activeIndex = 0;
+                    this.setState({messages:[{severity:'info', summary:'First Step', detail: event.item.label}]});
+                }
+            },
+            {
+                label: 'Seat',
+                command: (event) => {
+                    this.state.activeIndex = 1;
+                    this.setState({messages:[{severity:'info', summary:'Seat Selection', detail: event.item.label}]});
+                }
+            },
+            {
+                label: 'Payment',
+                command: (event) => {
+                    this.state.activeIndex = 2;
+                    this.setState({messages:[{severity:'info', summary:'Pay with CC', detail: event.item.label}]});
+                }
+            },
+            {
+                label: 'Confirmation',
+                command: (event) => {
+                    this.state.activeIndex = 3;
+                    this.setState({messages:[{severity:'info', summary:'Last Step', detail: event.item.label}]});
+                }
+            }
+        ];
+        return (
+            <div>
+                <div className="content-section">
+                    <div className="feature-intro">
+                        <h1>Steps</h1>
+                        <p>Steps components is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.</p>
+                    </div>
+                </div>
+                <div className="content-section implementation">
+                    <Growl value={this.state.messages}/>
+
+                    <h3>Basic</h3>
+                    <Steps model={items}/>
+
+                    <h3>Clickable</h3>
+                    <Steps model={items} activeIndex={this.state.activeIndex} readOnly={false}/>
+
+                    <h3>Custom Style</h3>
+                    <Steps model={items} styleClass="steps-custom"/>
+                </div>
+
+                <StepsDoc/>
+
+            </div>
+        );
+    }
+}
+                        `}
+                        </CodeHighlight>
+                    </TabPanel>
+                </TabView>
+            </div>
+        )
+    }
+
+}
\ No newline at end of file