diff --git a/src/App.js b/src/App.js
index 6574bfd485..f01aca2c46 100644
--- a/src/App.js
+++ b/src/App.js
@@ -232,6 +232,7 @@ class AppMenu extends Component {
                             <Link to="/tieredmenu">&#9679; TieredMenu</Link>
                             <Link to="/menubar">&#9679; Menubar</Link>
                             <Link to="/contextmenu">&#9679; ContextMenu</Link>
+                            <Link to="/panelmenu">&#9679; PanelMenu</Link>
                         </div>
 
                         <a href="#" onClick={(event) => this.openMenu(event, 7)} className={classNames({ 'active-menuitem': this.state.activeMenu === 7 })}>
diff --git a/src/components/contextmenu/ContextMenu.js b/src/components/contextmenu/ContextMenu.js
index 7807b5a6e8..094b335a6a 100644
--- a/src/components/contextmenu/ContextMenu.js
+++ b/src/components/contextmenu/ContextMenu.js
@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
 import DomHandler from '../utils/DomHandler';
 import classNames from 'classnames';
 import {NestedMenu} from "../nestedmenu/NestedMenu";
@@ -127,9 +126,9 @@ export class ContextMenu extends Component {
         var divClass=classNames('ui-contextmenu ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix ui-menu-dynamic ui-shadow',
             this.props.styleClass);
         var ulClass=classNames('ui-menu-list ui-helper-reset');
-        var styleClass={};
+        var menuStyle=Object.assign({display:this.state.visible?'block':'none'},this.props.style)
         return (
-            <div className={divClass} style={{display:this.state.visible?'block':'none'&& this.props.style}} ref={el=>this.container=el} >
+            <div className={divClass} style={menuStyle} ref={el=>this.container=el} >
                 <NestedMenu styleClass={ulClass} items={this.props.model} root={true} parentMenu="ContextMenu" index={0}/>
             </div>
         );
diff --git a/src/components/panelmenu/PanelMenu.js b/src/components/panelmenu/PanelMenu.js
new file mode 100644
index 0000000000..ebb1efbbfd
--- /dev/null
+++ b/src/components/panelmenu/PanelMenu.js
@@ -0,0 +1,188 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export class PanelMenu extends Component {
+    static defaultProps = {
+        model:null,
+        style: null,
+        styleClass: null
+    }
+
+    static propsTypes = {
+        model:PropTypes.array,
+        style: PropTypes.any,
+        styleClass: PropTypes.string
+    }
+
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+    render() {
+        var divClass=classNames('ui-panelmenu ui-widget',this.props.styleClass);
+
+        return (
+            <div className={divClass} style={this.props.style} ref={el=>this.container=el} >
+                {this.props.model && this.props.model.map((item,index)=>{
+                    return <PanelMenuItem item={item} index={index} length={this.props.model.length} key={index}/>})}
+            </div>
+        );
+    }
+}
+
+export class PanelMenuItem extends Component{
+    static defaultProps = {
+        item:null,
+        index:null,
+        length:null,
+    }
+
+    static propsTypes = {
+        item:PropTypes.any,
+        index:PropTypes.any,
+        length:PropTypes.any
+    }
+
+    constructor(props) {
+        super(props);
+        this.item=this.props.item;
+        this.state = {expanded:this.item.expanded};
+    }
+    itemClick(event,item){
+        if(item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.setState({expanded:!this.state.expanded});
+        if(!item.url) {
+            event.preventDefault();
+        }
+
+        if(item.command) {
+            item.command({
+                originalEvent: event,
+                item: item
+            });
+        }
+    }
+    render(){
+
+        var subPanel=classNames('ui-panelmenu-content-wrapper',{'ui-panelmenu-content-wrapper-overflown': !this.state.expanded})
+        var iconClass=classNames('ui-menuitem-icon fa fa-fw',this.item.icon?this.item.icon:null);
+        var panelIcon=classNames('ui-panelmenu-icon fa',{'fa-caret-right':!this.state.expanded},{' fa-caret-down':this.state.expanded});
+        var itemClass=classNames('ui-widget ui-panelmenu-header ui-state-default', this.item.styleClass, {'ui-state-active':this.state.expanded},
+            {'ui-state-disabled':this.item.disabled},{'ui-corner-top':this.props.index===0},{'ui-corner-bottom':this.props.index===this.props.length-1 &&!this.state.expanded});
+
+        return (
+            <div className="ui-panelmenu-panel" key={this.props.index}>
+                <div className={itemClass} style={this.item.style}>
+                    {this.item.url?
+                        <a href={this.item.url || '#'} className={{'ui-panelmenu-headerlink-hasicon':this.item.icon}} target={this.item.target} onClick={event=>this.itemClick(event,this.item)}>
+                            {this.item.items && <span className={panelIcon}></span>}
+                            {this.item.icon && <span className={iconClass}></span>}
+                            <span className="ui-menuitem-text">{this.item.label}</span>
+                        </a>:
+                        <a href={'#'} className={{'ui-panelmenu-headerlink-hasicon':this.item.icon}} target={this.item.target} onClick={event=>this.itemClick(event,this.item)}>
+                            {this.item.items && <span className={panelIcon}></span>}
+                            {this.item.icon && <span className={iconClass}></span>}
+                            <span className="ui-menuitem-text">{this.item.label}</span>
+                        </a>
+                    }
+                </div>
+                {this.item.items && <div className={subPanel} style={{height:!this.state.expanded?'0px':'auto'}} >
+                    <div className="ui-panelmenu-content ui-widget-content">
+                        <SubItem item={this.item} expanded={true}/>
+                    </div>
+                </div>}
+        </div>);
+    }
+}
+class SubItem extends Component{
+    static defaultProps = {
+        item:null,
+        expanded:null,
+    }
+
+    static propsTypes = {
+        item:PropTypes.any,
+        expanded:PropTypes.bool
+    }
+
+    constructor(props) {
+        super(props);
+        this.item=this.props.item;
+        this.state = {};
+    }
+
+    render(){
+        return(
+            <ul className="ui-menu-list ui-helper-reset" style={{height:this.props.expanded?'auto':'0px'}}>
+                {this.item.items && this.item.items.map((child,index)=>{
+                    return <Item child={child} tabIndex={this.item.expanded} index={index} key={index}/>;
+                })}
+            </ul>
+        );
+    }
+}
+class Item extends Component{
+    static defaultProps = {
+        child:null,
+        tabIndex:null,
+        index:null
+    }
+
+    static propsTypes = {
+        child:PropTypes.any,
+        tabIndex:PropTypes.bool,
+        index:PropTypes.any
+    }
+
+    constructor(props) {
+        super(props);
+        this.child=this.props.child;
+        this.state = {expanded:this.child.expanded};
+    }
+    itemClick(event,item){
+        if(item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.setState({expanded:!this.state.expanded})
+        if(!item.url) {
+            event.preventDefault();
+        }
+
+        if(item.command) {
+            item.command({
+                originalEvent: event,
+                item: item
+            });
+        }
+    }
+
+    render(){
+        var panelClass=classNames('ui-panelmenu-icon fa fa-fw',{'fa-caret-right':!this.state.expanded},{' fa-caret-down':this.state.expanded})
+        var iconClass=classNames('ui-menuitem-icon fa fa-fw',this.child.icon?this.child.icon:null);
+        var aClass=classNames('ui-menuitem-link ui-corner-all',{'ui-menuitem-link-hasicon':this.child.icon&&this.child.items,'ui-state-disabled':this.child.disabled})
+        var listClass=classNames('ui-menuitem ui-corner-all',{'ui-menu-parent':this.child.items},this.child.styleClass);
+        return(
+            this.child.separator?
+                <li className="ui-menu-separator ui-widget-content" key={this.props.index}/>:
+                <li className={listClass} style={this.child.style}  key={this.props.index}>
+                    {this.child.url?
+                        <a className={aClass} href={this.child.url || '#'} target={this.child.target} tabIndex={!this.props.tabIndex?null:'-1'} onClick={event=>{this.itemClick(event,this.child);}}>
+                            {this.child.items && <span className={panelClass}></span>}
+                            {this.child.icon && <span className={iconClass}></span>}
+                            <span className="ui-menuitem-text">{this.child.label}</span>
+                        </a>:
+                        <a className={aClass} href={'#'} target={this.child.target} tabIndex={!this.props.tabIndex?null:'-1'} onClick={event=>{this.itemClick(event,this.child);}}>
+                            {this.child.items && <span className={panelClass}></span>}
+                            {this.child.icon && <span className={iconClass}></span>}
+                            <span className="ui-menuitem-text">{this.child.label}</span>
+                        </a>}
+                    {this.child.items && <SubItem item={this.child} expanded={this.state.expanded}/>}
+                </li>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index c5e2c54d66..9b400622a3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -74,6 +74,7 @@ import {BreadcrumbDemo} from './showcase/breadcrumb/BreadcrumbDemo';
 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 {OrganizationChartDemo} from './showcase/organizationchart/OrganizationChartDemo';
 import {Router,Route,hashHistory} from 'react-router';
 
@@ -151,6 +152,7 @@ ReactDOM.render(
             <Route path="/tieredmenu" component={TieredMenuDemo} />
             <Route path="/menubar" component={MenubarDemo} />
             <Route path="/contextmenu" component={ContextMenuDemo} />
+            <Route path="/panelmenu" component={PanelMenuDemo} />
             <Route path="/setup" component={SetupPage} />
             <Route path="/splitbutton" component={SplitButtonDemo} />
             <Route path="/organizationchart" component={OrganizationChartDemo} />
diff --git a/src/showcase/panelmenu/PanelMenuDemo.js b/src/showcase/panelmenu/PanelMenuDemo.js
new file mode 100644
index 0000000000..9c17c30b78
--- /dev/null
+++ b/src/showcase/panelmenu/PanelMenuDemo.js
@@ -0,0 +1,409 @@
+import React, {Component} from 'react';
+import {Link} from 'react-router';
+import {PanelMenu} from '../../components/panelmenu/PanelMenu';
+import {TabView,TabPanel} from '../../components/tabview/TabView';
+import {CodeHighlight} from '../../components/codehighlight/CodeHighlight';
+
+export class PanelMenuDemo extends Component {
+
+    constructor() {
+        super();
+        this.state = {};
+    }
+
+    render() {
+        var items=[
+            {
+                label: 'File',
+                icon: 'fa-file-o',
+                items: [{
+                    label: 'New',
+                    icon: 'fa-plus',
+                    items: [
+                        {label: 'Project'},
+                        {label: 'Other'},
+                    ]
+                },
+                    {label: 'Open'},
+                    {separator: true},
+                    {label: 'Quit'}
+                ]
+            },
+            {
+                label: 'Edit',
+                icon: 'fa-edit',
+                items: [
+                    {label: 'Undo', icon: 'fa-mail-forward'},
+                    {label: 'Redo', icon: 'fa-mail-reply'}
+                ]
+            },
+            {
+                label: 'Help',
+                icon: 'fa-question',
+                items: [
+                    {
+                        label: 'Contents'
+                    },
+                    {
+                        label: 'Search',
+                        icon: 'fa-search',
+                        items: [
+                            {
+                                label: 'Text',
+                                items: [
+                                    {
+                                        label: 'Workspace'
+                                    }
+                                ]
+                            },
+                            {
+                                label: 'File'
+                            }
+                        ]}
+                ]
+            },
+            {
+                label: 'Actions',
+                icon: 'fa-gear',
+                items: [
+                    {
+                        label: 'Edit',
+                        icon: 'fa-refresh',
+                        items: [
+                            {label: 'Save', icon: 'fa-save'},
+                            {label: 'Update', icon: 'fa-save'},
+                        ]
+                    },
+                    {
+                        label: 'Other',
+                        icon: 'fa-phone',
+                        items: [
+                            {label: 'Delete', icon: 'fa-minus'}
+                        ]
+                    }
+                ]
+            }
+        ];
+        return (
+            <div>
+                <div className="content-section">
+                    <div className="feature-intro">
+                        <h1>PanelMenu</h1>
+                        <p>PanelMenu is a hybrid of accordion-tree components.</p>
+                    </div>
+                </div>
+                <div className="content-section implementation">
+                    <PanelMenu model={items} style={{width:'300px'}}/>
+                </div>
+
+                <PanelMenuDoc/>
+
+            </div>
+        );
+    }
+}
+
+class PanelMenuDoc extends Component {
+    render() {
+        return (
+            <div className="content-section source">
+                <TabView effect="fade">
+                    <TabPanel header="Documentation">
+                        <h3>Import</h3>
+                        <CodeHighlight className="language-javascript">
+                            {`
+import {PanelMenu} from 'primereact/components/panelmenu/PanelMenu';
+
+`}</CodeHighlight>
+                        <h3>MenuItem API</h3>
+                        <p>PanelMenu uses the common menu item api to define its items, visit <Link to="/menu"> Menu </Link> for details.</p>
+
+                        <h3>Getting Started</h3>
+                        <p>PanelMenu requires nested menuitems as its model.</p>
+                        <CodeHighlight className="language-markup">
+                            {`
+<PanelMenu model={items} style={{width:'300px'}}/>
+
+`}
+                        </CodeHighlight>
+
+                        <CodeHighlight className="language-markup">
+                            {`
+var items=[
+    {
+        label: 'File',
+        icon: 'fa-file-o',
+        items: [{
+            label: 'New',
+            icon: 'fa-plus',
+            items: [
+                {label: 'Project'},
+                {label: 'Other'},
+            ]
+        },
+            {label: 'Open'},
+            {separator: true},
+            {label: 'Quit'}
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'fa-edit',
+        items: [
+            {label: 'Undo', icon: 'fa-mail-forward'},
+            {label: 'Redo', icon: 'fa-mail-reply'}
+        ]
+    },
+    {
+        label: 'Help',
+        icon: 'fa-question',
+        items: [
+            {
+                label: 'Contents'
+            },
+            {
+                label: 'Search',
+                icon: 'fa-search',
+                items: [
+                    {
+                        label: 'Text',
+                        items: [
+                            {
+                                label: 'Workspace'
+                            }
+                        ]
+                    },
+                    {
+                        label: 'File'
+                    }
+                ]}
+        ]
+    },
+    {
+        label: 'Actions',
+        icon: 'fa-gear',
+        items: [
+            {
+                label: 'Edit',
+                icon: 'fa-refresh',
+                items: [
+                    {label: 'Save', icon: 'fa-save'},
+                    {label: 'Update', icon: 'fa-save'},
+                ]
+            },
+            {
+                label: 'Other',
+                icon: 'fa-phone',
+                items: [
+                    {label: 'Delete', icon: 'fa-minus'}
+                ]
+            }
+        ]
+    }
+];
+
+`}
+                        </CodeHighlight>
+
+                        <h3>Initial State</h3>
+                        <p>MenuItem has an expanded property to control the visibility of a submenu, you may use this property to control the state from the menumodel.</p>
+
+                        <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>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>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-panelmenu</td>
+                                        <td>Container element.</td>
+                                    </tr>
+                                    <tr>
+                                        <td>ui-panelmenu-header</td>
+                                        <td>Accordion header of root submenu.</td>
+                                    </tr>
+                                    <tr>
+                                        <td>ui-panelmenu-content</td>
+                                        <td>Accordion content of root submenu.</td>
+                                    </tr>
+                                    <tr>
+                                        <td>ui-menu-list</td>
+                                        <td>List element.</td>
+                                    </tr>
+                                    <tr>
+                                        <td>ui-menuitem</td>
+                                        <td>Menuitem element.</td>
+                                    </tr>
+                                    <tr>
+                                        <td>ui-menuitem-text</td>
+                                        <td>Label of a menuitem.</td>
+                                    </tr>
+                                    <tr>
+                                        <td>ui-menuitem-icon</td>
+                                        <td>Icon of a menuitem.</td>
+                                    </tr>
+                                    <tr>
+                                        <td>ui-panelmenu-icon</td>
+                                        <td>Arrow icon of an accordion header.</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/panelmenu" className="btn-viewsource" target="_blank">
+                            <i className="fa fa-github"></i>
+                            <span>View on GitHub</span>
+                        </a>
+                        <CodeHighlight className="language-javascript">
+                            {`
+export class PanelMenuDemo extends Component {
+
+    constructor() {
+        super();
+        this.state = {};
+    }
+
+    render() {
+        var items=[
+            {
+                label: 'File',
+                icon: 'fa-file-o',
+                items: [{
+                    label: 'New',
+                    icon: 'fa-plus',
+                    items: [
+                        {label: 'Project'},
+                        {label: 'Other'},
+                    ]
+                },
+                    {label: 'Open'},
+                    {separator: true},
+                    {label: 'Quit'}
+                ]
+            },
+            {
+                label: 'Edit',
+                icon: 'fa-edit',
+                items: [
+                    {label: 'Undo', icon: 'fa-mail-forward'},
+                    {label: 'Redo', icon: 'fa-mail-reply'}
+                ]
+            },
+            {
+                label: 'Help',
+                icon: 'fa-question',
+                items: [
+                    {
+                        label: 'Contents'
+                    },
+                    {
+                        label: 'Search',
+                        icon: 'fa-search',
+                        items: [
+                            {
+                                label: 'Text',
+                                items: [
+                                    {
+                                        label: 'Workspace'
+                                    }
+                                ]
+                            },
+                            {
+                                label: 'File'
+                            }
+                        ]}
+                ]
+            },
+            {
+                label: 'Actions',
+                icon: 'fa-gear',
+                items: [
+                    {
+                        label: 'Edit',
+                        icon: 'fa-refresh',
+                        items: [
+                            {label: 'Save', icon: 'fa-save'},
+                            {label: 'Update', icon: 'fa-save'},
+                        ]
+                    },
+                    {
+                        label: 'Other',
+                        icon: 'fa-phone',
+                        items: [
+                            {label: 'Delete', icon: 'fa-minus'}
+                        ]
+                    }
+                ]
+            }
+        ];
+        return (
+            <div>
+                <div className="content-section">
+                    <div className="feature-intro">
+                        <h1>PanelMenu</h1>
+                        <p>PanelMenu is a hybrid of accordion-tree components.</p>
+                    </div>
+                </div>
+                <div className="content-section implementation">
+                    <PanelMenu model={items} style={{width:'300px'}}/>
+                </div>
+
+                <PanelMenuDoc/>
+
+            </div>
+        );
+    }
+}
+                        `}
+                        </CodeHighlight>
+                    </TabPanel>
+                </TabView>
+            </div>
+        )
+    }
+
+}
\ No newline at end of file