diff --git a/exports/panelmenu.d.ts b/exports/panelmenu.d.ts
new file mode 100644
index 000000000..561767f8a
--- /dev/null
+++ b/exports/panelmenu.d.ts
@@ -0,0 +1 @@
+export * from './components/panelmenu/PanelMenu';
\ No newline at end of file
diff --git a/exports/panelmenu.js b/exports/panelmenu.js
new file mode 100644
index 000000000..e5f3ca99b
--- /dev/null
+++ b/exports/panelmenu.js
@@ -0,0 +1,3 @@
+'use strict';
+module.exports = require('./components/panelmenu/PanelMenu.vue');
+            
\ No newline at end of file
diff --git a/src/views/panelmenu/PanelMenuDoc.vue b/src/views/panelmenu/PanelMenuDoc.vue
index 429ffde94..f340fe19e 100644
--- a/src/views/panelmenu/PanelMenuDoc.vue
+++ b/src/views/panelmenu/PanelMenuDoc.vue
@@ -11,9 +11,9 @@ import PanelMenu from 'primevue/panelmenu';
                 <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>
+				<p>PanelMenu requires a collection of menuitems as its model.</p>
 <CodeHighlight>
-&lt;Menu :model="items" /&gt;
+&lt;PanelMenu :model="items" /&gt;
 </CodeHighlight>
 
 <CodeHighlight lang="js">
@@ -21,65 +21,125 @@ 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'
+                {
+                   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'
+                            }
+                         ]
+                      }
+                   ]
                 }
-			]
+             ]
 		}
 	}
 }
-</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>
@@ -100,61 +160,6 @@ toggle(event) {
                                 <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>
@@ -172,11 +177,19 @@ toggle(event) {
 						</thead>
 						<tbody>
                             <tr>
-                                <td>p-menu</td>
+                                <td>p-panelmenu</td>
                                 <td>Container element.</td>
                             </tr>
                             <tr>
-                                <td>p-menu-list</td>
+                                <td>p-panelmenu-header</td>
+                                <td>Accordion header of root submenu.</td>
+                            </tr>
+                            <tr>
+                                <td>p-panelmenu-content</td>
+                                <td>Accordion content of root submenu.</td>
+                            </tr>
+                            <tr>
+                                <td>p-submenu-list</td>
                                 <td>List element.</td>
                             </tr>
                             <tr>
@@ -190,6 +203,10 @@ toggle(event) {
                             <tr>
                                 <td>p-menuitem-icon</td>
                                 <td>Icon of a menuitem.</td>
+                            </tr>
+                            <tr>
+                                <td>p-panelmenu-icon</td>
+                                <td>Arrow icon of an accordion header.</td>
                             </tr>
 						</tbody>
 					</table>
@@ -205,12 +222,7 @@ toggle(event) {
 				</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;
+&lt;PanelMenu :model="items" /&gt;
 </template>
 </CodeHighlight>
 
@@ -220,44 +232,121 @@ export default {
         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: '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: '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});
+                   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'
+                            }
+                         ]
+                      }
+                   ]
+                }
+             ]
         }
     }
 }