diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 0e0446a6e..40b73e38b 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -132,6 +132,7 @@
                         <router-link to="/megamenu">&#9679; MegaMenu</router-link>
                         <router-link to="/menu">&#9679; Menu</router-link>
                         <router-link to="/menubar">&#9679; Menubar</router-link>
+                        <router-link to="/panelmenu">&#9679; PanelMenu</router-link>
                         <router-link to="/steps">&#9679; Steps</router-link>
                         <router-link to="/tabmenu">&#9679; TabMenu</router-link>
                         <router-link to="/tieredmenu">&#9679; TieredMenu</router-link>
diff --git a/src/components/panelmenu/PanelMenu.d.ts b/src/components/panelmenu/PanelMenu.d.ts
new file mode 100644
index 000000000..3f7bd2ff2
--- /dev/null
+++ b/src/components/panelmenu/PanelMenu.d.ts
@@ -0,0 +1,5 @@
+import Vue from 'vue';
+
+export declare class PanelMenu extends Vue {
+    model?: any[];
+}
\ No newline at end of file
diff --git a/src/components/panelmenu/PanelMenu.vue b/src/components/panelmenu/PanelMenu.vue
new file mode 100644
index 000000000..23d07269d
--- /dev/null
+++ b/src/components/panelmenu/PanelMenu.vue
@@ -0,0 +1,122 @@
+<template>
+    <div class="p-panelmenu p-component">
+        <template v-for="(item, index) of model">
+            <div :key="item.label + '_' + index" :class="getPanelClass(item)" :style="item.style">
+                <div :class="getHeaderClass(item)" :style="item.style">
+                    <a :href="item.url || '#'" class="p-panelmenu-header-link" @click="onItemClick($event, item)">
+                        <span v-if="item.items" :class="getPanelToggleIcon(item)"></span>
+                        <span v-if="item.icon" :class="getPanelIcon(item)"></span>
+                        <span class="p-menuitem-text">{{item.label}}</span>
+                    </a>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+import PanelMenuSub from './PanelMenuSub';
+
+export default {
+    props: {
+		model: {
+            type: Array,
+            default: null
+        }
+    },
+    data() {
+        return {
+            activeItem: null
+        }
+    },
+    methods: {
+        onItemClick(event, item) {
+
+        },
+        getPanelClass(item) {
+            return ['p-panelmenu-panel', item.class, {'p-disabled': item.disabled}];
+        },
+        getPanelToggleIcon(item) {
+            const active = item === this.activeItem;
+            return ['p-panelmenu-icon pi pi-fw', {'pi-caret-right': !active,' pi-caret-down': active}];
+        },
+        getPanelIcon(item) {
+            return ['p-menuitem-icon', item.icon];
+        },
+        getHeaderClass(item) {
+            return ['p-component p-panelmenu-header', {'p-highlight': (item === this.activeItem)}];
+        }
+    },
+    computed: {
+    },
+    components: {
+        'PanelMenuSub': PanelMenuSub
+    }
+}
+</script>
+
+<style>
+.p-panelmenu {
+    width: auto;
+}
+
+.p-panelmenu .p-menu-separator {
+    border-width: 1px 0 0 0;
+}
+
+.p-panelmenu .p-panelmenu-content-wrapper {
+    overflow: hidden;
+}
+
+.p-panelmenu .p-panelmenu-header {
+    margin: -1px 0 0 0;
+    zoom: 1;
+}
+
+.p-panelmenu .p-panelmenu-header-link {
+    padding: .5em;
+    display: block;
+    text-decoration: none;
+}
+
+.p-panelmenu .p-panelmenu-icon {
+    vertical-align: middle;
+}
+
+.p-panelmenu .p-menuitem-text {
+    vertical-align: middle;
+}
+
+.p-panelmenu .p-menuitem-icon {
+    margin-right: .25em;
+    vertical-align: middle;
+}
+
+.p-panelmenu .p-panelmenu-content {
+    padding: 0.25em;
+    border-top: 0;
+    margin-bottom: 1px;
+}
+
+.p-panelmenu .p-submenu-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    margin-left: 1.5em;
+}
+
+.p-panelmenu .p-panelmenu-content > .p-panelmenu-root-submenu.p-submenu-list {
+    margin-left: 0;
+}
+
+.p-panelmenu .p-menuitem {
+    overflow: hidden;
+    margin: .125em 0;
+}
+
+.p-panelmenu .p-menuitem-link {
+    padding: .25em;
+    display: block;
+    text-decoration: none;
+}
+</style>
diff --git a/src/components/panelmenu/PanelMenuSub.vue b/src/components/panelmenu/PanelMenuSub.vue
new file mode 100644
index 000000000..196850181
--- /dev/null
+++ b/src/components/panelmenu/PanelMenuSub.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="p-panelmenu-panel">
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+		item: {
+            type: null,
+            default: null
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 8a36ecb66..9e26a04f7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -39,6 +39,7 @@ import OrganizationChart from './components/organizationchart/OrganizationChart'
 import OverlayPanel from './components/overlaypanel/OverlayPanel';
 import Paginator from './components/paginator/Paginator';
 import Panel from './components/panel/Panel';
+import PanelMenu from './components/panelmenu/PanelMenu';
 import Password from './components/password/Password';
 import PickList from './components/picklist/PickList';
 import ProgressBar from './components/progressbar/ProgressBar';
@@ -119,6 +120,7 @@ Vue.component('OrganizationChart', OrganizationChart);
 Vue.component('OverlayPanel', OverlayPanel);
 Vue.component('Paginator', Paginator);
 Vue.component('Panel', Panel);
+Vue.component('PanelMenu', PanelMenu);
 Vue.component('Password', Password);
 Vue.component('PickList', PickList);
 Vue.component('ProgressBar', ProgressBar);
diff --git a/src/router.js b/src/router.js
index 99662b408..3220ec262 100644
--- a/src/router.js
+++ b/src/router.js
@@ -351,6 +351,11 @@ export default new Router({
 			name: 'panel',
 			component: () => import('./views/panel/PanelDemo.vue')
         },
+        {
+			path: '/panelmenu',
+			name: 'panelmenu',
+			component: () => import('./views/panelmenu/PanelMenuDemo.vue')
+		},
         {
 			path: '/picklist',
 			name: 'picklist',
diff --git a/src/views/panelmenu/PanelMenuDemo.vue b/src/views/panelmenu/PanelMenuDemo.vue
new file mode 100644
index 000000000..90e1d84fc
--- /dev/null
+++ b/src/views/panelmenu/PanelMenuDemo.vue
@@ -0,0 +1,153 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>PanelMenu</h1>
+                <p>PanelMenu is a hybrid of Accordion and Tree components.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <PanelMenu :model="items" />
+        </div>
+
+        <PanelMenuDoc />
+    </div>
+</template>
+
+<script>
+import PanelMenuDoc from './PanelMenuDoc';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                   label: 'File',
+                   icon:'pi pi-fw pi-file',
+                   items: [
+                      {
+                         label: 'New',
+                         icon:'pi pi-fw pi-plus',
+                         items: [
+                            {
+                               label: 'Bookmark',
+                               icon:'pi pi-fw pi-bookmark'
+                            },
+                            {
+                               label: 'Video',
+                               icon:'pi pi-fw pi-video'
+                            }
+                         ]
+                      },
+                      {
+                         label: 'Delete',
+                         icon:'pi pi-fw pi-trash'
+                      },
+                      {
+                         label: 'Export',
+                         icon:'pi pi-fw pi-external-link'
+                      }
+                   ]
+                },
+                {
+                   label: 'Edit',
+                   icon:'pi pi-fw pi-pencil',
+                   items: [
+                      {
+                         label: 'Left',
+                         icon:'pi pi-fw pi-align-left'
+                      },
+                      {
+                         label: 'Right',
+                         icon:'pi pi-fw pi-align-right'
+                      },
+                      {
+                         label: 'Center',
+                         icon:'pi pi-fw pi-align-center'
+                      },
+                      {
+                         label: 'Justify',
+                         icon:'pi pi-fw pi-align-justify'
+                      }
+                   ]
+                },
+                {
+                   label: 'Users',
+                   icon:'pi pi-fw pi-user',
+                   items: [
+                      {
+                         label: 'New',
+                         icon:'pi pi-fw pi-user-plus',
+             
+                      },
+                      {
+                         label: 'Delete',
+                         icon:'pi pi-fw pi-user-minus',
+                      },
+                      {
+                         label: 'Search',
+                         icon:'pi pi-fw pi-users',
+                         items: [
+                            {
+                               label: 'Filter',
+                               icon:'pi pi-fw pi-filter',
+                               items: [
+                                  {
+                                     label: 'Print',
+                                     icon:'pi pi-fw pi-print'
+                                  }
+                               ]
+                            },
+                            {
+                               icon:'pi pi-fw pi-bars',
+                               label: 'List'
+                            }
+                         ]
+                      }
+                   ]
+                },
+                {
+                   label: 'Events',
+                   icon:'pi pi-fw pi-calendar',
+                   items: [
+                      {
+                         label: 'Edit',
+                         icon:'pi pi-fw pi-pencil',
+                         items: [
+                            {
+                               label: 'Save',
+                               icon:'pi pi-fw pi-calendar-plus'
+                            },
+                            {
+                               label: 'Delete',
+                               icon:'pi pi-fw pi-calendar-minus'
+                            }
+                         ]
+                      },
+                      {
+                         label: 'Archieve',
+                         icon:'pi pi-fw pi-calendar-times',
+                         items: [
+                            {
+                               label: 'Remove',
+                               icon:'pi pi-fw pi-calendar-minus'
+                            }
+                         ]
+                      }
+                   ]
+                }
+             ]
+        }
+    },
+    components: {
+        'PanelMenuDoc': PanelMenuDoc
+	}
+}
+</script>
+
+<style scoped lang="scss">
+    .p-panelmenu {
+        width: 22em;
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/panelmenu/PanelMenuDoc.vue b/src/views/panelmenu/PanelMenuDoc.vue
new file mode 100644
index 000000000..429ffde94
--- /dev/null
+++ b/src/views/panelmenu/PanelMenuDoc.vue
@@ -0,0 +1,268 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import PanelMenu from 'primevue/panelmenu';
+</CodeHighlight>
+
+                <h3>MenuModel</h3>
+                <p>Menu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
+
+				<h3>Getting Started</h3>
+				<p>Menu requires a collection of menuitems as its model.</p>
+<CodeHighlight>
+&lt;Menu :model="items" /&gt;
+</CodeHighlight>
+
+<CodeHighlight lang="js">
+export default {
+	data() {
+		return {
+			items: [
+				{
+					label: 'Update',
+					icon: 'pi pi-refresh',
+					command: () => {
+						this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
+					}
+				},
+				{
+					label: 'Delete',
+					icon: 'pi pi-times',
+					command: () => {
+						this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
+					}
+				},
+				{
+					label: 'Vue Website',
+					icon: 'pi pi-external-link',
+					url: 'https://vuejs.org/'
+				},
+				{
+                    label: 'Router',
+                    icon: 'pi pi-upload',
+                    to: '/fileupload'
+                }
+			]
+		}
+	}
+}
+</CodeHighlight>
+
+                <h3>SubMenus</h3>
+                <p>Menu supports one level of nesting via subitems of an item.</p>
+<CodeHighlight lang="js">
+const items: [
+    {
+        label: 'Options',
+        items: [{label: 'New', icon: 'pi pi-fw pi-plus', command:() => {} },
+                {label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr'}]
+    },
+    {
+        label: 'Account',
+        items: [{label: 'Options', icon: 'pi pi-fw pi-cog', to: '/options'},
+                {label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ]
+    }
+];
+</CodeHighlight>
+
+                <h3>Popup Mode</h3>
+                <p>Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
+
+<CodeHighlight>
+&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
+&lt;Menu ref="menu" :model="items" :popup="true" /&gt;
+</CodeHighlight>
+
+<CodeHighlight lang="js">
+toggle(event) {
+    this.$refs.menu.toggle(event);
+}
+</CodeHighlight>
+
+                <h3>Properties</h3>
+                <p>Any attribute such as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+				<div class="doc-tablewrapper">
+					<table class="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>popup</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Defines if menu would displayed as a popup.</td>
+                            </tr>
+                            <tr>
+                                <td>appendTo</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>DOM element instance where the dialog should be mounted.</td>
+                            </tr>
+                            <tr>
+                                <td>baseZIndex</td>
+                                <td>number</td>
+                                <td>0</td>
+                                <td>Base zIndex value to use in layering.</td>
+                            </tr>
+                            <tr>
+                                <td>autoZIndex</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether to automatically manage layering.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Methods</h3>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Parameters</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>toggle</td>
+                                <td>event: Browser event</td>
+                                <td>Toggles the visibility of the overlay.</td>
+                            </tr>
+                            <tr>
+                                <td>show</td>
+                                <td>event: Browser event <br />
+                                    target: Optional target if event.target would not be used</td>
+                                <td>Shows the overlay.</td>
+                            </tr>
+                            <tr>
+                                <td>hide</td>
+                                <td>-</td>
+                                <td>Hides the overlay.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Styling</h3>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>p-menu</td>
+                                <td>Container element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-menu-list</td>
+                                <td>List element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-menuitem</td>
+                                <td>Menuitem element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-menuitem-text</td>
+                                <td>Label of a menuitem.</td>
+                            </tr>
+                            <tr>
+                                <td>p-menuitem-icon</td>
+                                <td>Icon of a menuitem.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Dependencies</h3>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/menu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;h3&gt;Inline&lt;/h3&gt;
+&lt;Menu :model="items" /&gt;
+
+&lt;h3&gt;Overlay&lt;/h3&gt;
+&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
+&lt;Menu ref="menu" :model="items" :popup="true" /&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Options',
+                    items: [{
+                        label: 'Update',
+                        icon: 'pi pi-refresh',
+                        command: () => {
+                            this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
+                        }
+                    },
+                    {
+                        label: 'Delete',
+                        icon: 'pi pi-times',
+                        command: () => {
+                            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
+                        }
+                    }
+                ]},
+                {
+                    label: 'Navigate',
+                    items: [{
+                        label: 'Vue Website',
+                        icon: 'pi pi-external-link',
+                        url: 'https://vuejs.org/'
+                    },
+                    {
+                        label: 'Router',
+                        icon: 'pi pi-upload',
+                        to: '/fileupload'
+                    }
+                ]}
+            ]
+        }
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.menu.toggle(event);
+        },
+        save() {
+            this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
+        }
+    }
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file