From 54ee34c9182f546d175c2195912645f21e995668 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 11 Oct 2021 16:56:59 +0300
Subject: [PATCH] browser source added for menus

---
 src/views/breadcrumb/BreadcrumbDoc.vue   |  48 ++
 src/views/contextmenu/ContextMenuDoc.vue | 769 ++++++++++++++---------
 src/views/megamenu/MegaMenuDoc.vue       | 152 +++++
 src/views/menu/MenuDoc.vue               |  91 +++
 src/views/menubar/MenubarDoc.vue         | 761 +++++++++++++---------
 src/views/panelmenu/PanelMenuDoc.vue     | 201 ++++++
 src/views/steps/StepsDoc.vue             | 393 ++++++++++++
 src/views/tabmenu/TabMenuDoc.vue         | 145 +++++
 8 files changed, 1963 insertions(+), 597 deletions(-)

diff --git a/src/views/breadcrumb/BreadcrumbDoc.vue b/src/views/breadcrumb/BreadcrumbDoc.vue
index ecf370260..4377db3c1 100755
--- a/src/views/breadcrumb/BreadcrumbDoc.vue
+++ b/src/views/breadcrumb/BreadcrumbDoc.vue
@@ -211,6 +211,54 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/breadcrumb/breadcrumb.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <p-breadcrumb :home="home" :model="items"></p-breadcrumb>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+        const { createRouter, createWebHistory } = VueRouter;
+
+        const App = {
+            setup() {
+                const home = ref({
+                    icon: 'pi pi-home', 
+                    to: '/',
+                });
+                const items = ref([
+                    {label: 'Computer'},
+                    {label: 'Notebook'},
+                    {label: 'Accessories'},
+                    {label: 'Backpacks'},
+                    {label: 'Item'}
+                ]);
+
+                return { home, items }
+            },
+            components: {
+                "p-breadcrumb": primevue.breadcrumb
+            }
+        };
+
+        const routes = [{ path: "/", component: App }];
+
+        const router = VueRouter.createRouter({
+            history: VueRouter.createWebHashHistory(),
+            routes
+        });
+
+        createApp(App)
+            .use(router)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/contextmenu/ContextMenuDoc.vue b/src/views/contextmenu/ContextMenuDoc.vue
index 100063e7d..7f30a0096 100755
--- a/src/views/contextmenu/ContextMenuDoc.vue
+++ b/src/views/contextmenu/ContextMenuDoc.vue
@@ -358,317 +358,486 @@ export default {
     data() {
         return {
             sources: {
-            'options-api': {
-               tabName: 'Options API Source',
-               content: `
-<template>
-   <div>
-      <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
-      <ContextMenu ref="menu" :model="items" />
-    </div>
-</template>
+				'options-api': {
+					tabName: 'Options API Source',
+					content: `
+		<template>
+		<div>
+			<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
+			<ContextMenu ref="menu" :model="items" />
+			</div>
+		</template>
 
-<script>
-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'
-                            },
+		<script>
+		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'
-                      },
-                      {
-                         separator:true
-                      },
-                      {
-                         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:'Delete',
+								icon:'pi pi-fw pi-trash'
+							},
+							{
+								separator:true
+							},
+							{
+								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:'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:'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:'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'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   separator:true
-                },
-                {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
-                }
-             ]
-        }
-    },
-    methods: {
-        onImageRightClick(event) {
-            this.$refs.menu.show(event);
-        }
-    }
-}
-<\\/script>
-`
-            },
-            'composition-api': {
-               tabName: 'Composition API Source',
-               content: `
-<template>
-   <div>
-      <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
-      <ContextMenu ref="menu" :model="items" />
-   </div>
-</template>
+								]
+							},
+							{
+								label:'Archieve',
+								icon:'pi pi-fw pi-calendar-times',
+								items:[
+									{
+									label:'Remove',
+									icon:'pi pi-fw pi-calendar-minus'
+									}
+								]
+							}
+						]
+						},
+						{
+						separator:true
+						},
+						{
+						label:'Quit',
+						icon:'pi pi-fw pi-power-off'
+						}
+					]
+				}
+			},
+			methods: {
+				onImageRightClick(event) {
+					this.$refs.menu.show(event);
+				}
+			}
+		}
+		<\\/script>
+		`
+					},
+				'composition-api': {
+					tabName: 'Composition API Source',
+					content: `
+	<template>
+	<div>
+		<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
+		<ContextMenu ref="menu" :model="items" />
+	</div>
+	</template>
 
-<script>
-import { ref } from 'vue';
+	<script>
+	import { ref } from 'vue';
 
-export default {
-    setup() {
-        const menu = ref();
-        const items = ref([
-            {
-               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'
-                    },
-                    {
-                       separator:true
-                    },
-                    {
-                       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'
-                            },
+	export default {
+		setup() {
+			const menu = ref();
+			const items = ref([
+				{
+				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'
+						},
+						{
+						separator:true
+						},
+						{
+						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'
-                            }
-                         ]
-                    }
-                ]
-            },
-            {
-               separator:true
-            },
-            {
-               label:'Quit',
-               icon:'pi pi-fw pi-power-off'
-            }
-        ]);
+							]
+						},
+						{
+							label:'Archieve',
+							icon:'pi pi-fw pi-calendar-times',
+							items:[
+								{
+								label:'Remove',
+								icon:'pi pi-fw pi-calendar-minus'
+								}
+							]
+						}
+					]
+				},
+				{
+				separator:true
+				},
+				{
+				label:'Quit',
+				icon:'pi pi-fw pi-power-off'
+				}
+			]);
 
-        const onImageRightClick = (event) => {
-            menu.value.show(event);
-        };
+			const onImageRightClick = (event) => {
+				menu.value.show(event);
+			};
 
-        return { menu, items, onImageRightClick }
-    }
-}
-<\\/script>
-`
-            }
-         }
+			return { menu, items, onImageRightClick }
+		}
+	}
+	<\\/script>
+	`
+				},
+				'browser-source': {
+					tabName: 'Browser Source',
+					imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
+			<script src="https://unpkg.com/primevue@^3/contextmenu/contextmenu.min.js"><\\/script>`,
+					content: `
+		<div id="app">
+			<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
+			<p-contextmenu ref="menu" :model="items"></p-contextmenu>
+		</div>
+
+		<script type="module">
+		const { createApp, ref } = Vue;
+
+		const App = {
+			setup() {
+				const menu = ref();
+				const items = ref([
+					{
+					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'
+							},
+							{
+							separator:true
+							},
+							{
+							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'
+									}
+								]
+							}
+						]
+					},
+					{
+					separator:true
+					},
+					{
+					label:'Quit',
+					icon:'pi pi-fw pi-power-off'
+					}
+				]);
+
+				const onImageRightClick = (event) => {
+					menu.value.show(event);
+				};
+
+				return { menu, items, onImageRightClick }
+			},
+			components: {
+				"p-contextmenu": primevue.contextmenu
+			}
+		};
+
+		const routes = [{ path: "/", component: App }];
+
+        const router = VueRouter.createRouter({
+            history: VueRouter.createWebHashHistory(),
+            routes
+        });
+
+		createApp(App)
+			.use(router)
+            .use(primevue.config.default)
+            .mount("#app");
+		<\\/script>
+	`
+				}
+			}
         }
     }
 }
diff --git a/src/views/megamenu/MegaMenuDoc.vue b/src/views/megamenu/MegaMenuDoc.vue
index 5fcfc9fbc..b5556b803 100755
--- a/src/views/megamenu/MegaMenuDoc.vue
+++ b/src/views/megamenu/MegaMenuDoc.vue
@@ -571,6 +571,158 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/megamenu/megamenu.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Horizontal</h5>
+            <p-megamenu :model="items"></p-megamenu>
+
+            <h5>Vertical</h5>
+            <p-megamenu :model="items" orientation="vertical"></p-megamenu>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const items = ref([
+                    {
+                        label: 'Videos', icon: 'pi pi-fw pi-video',
+                        items: [
+                            [
+                                {
+                                    label: 'Video 1',
+                                    items: [{label: 'Video 1.1'}, {label: 'Video 1.2'}]
+                                },
+                                {
+                                    label: 'Video 2',
+                                    items: [{label: 'Video 2.1'}, {label: 'Video 2.2'}]
+                                }
+                            ],
+                            [
+                                {
+                                    label: 'Video 3',
+                                    items: [{label: 'Video 3.1'}, {label: 'Video 3.2'}]
+                                },
+                                {
+                                    label: 'Video 4',
+                                    items: [{label: 'Video 4.1'}, {label: 'Video 4.2'}]
+                                }
+                            ]
+                        ]
+                    },
+                    {
+                        label: 'Users', icon: 'pi pi-fw pi-users',
+                        items: [
+                            [
+                                {
+                                    label: 'User 1',
+                                    items: [{label: 'User 1.1'}, {label: 'User 1.2'}]
+                                },
+                                {
+                                    label: 'User 2',
+                                    items: [{label: 'User 2.1'}, {label: 'User 2.2'}]
+                                },
+                            ],
+                            [
+                                {
+                                    label: 'User 3',
+                                    items: [{label: 'User 3.1'}, {label: 'User 3.2'}]
+                                },
+                                {
+                                    label: 'User 4',
+                                    items: [{label: 'User 4.1'}, {label: 'User 4.2'}]
+                                }
+                            ],
+                            [
+                                {
+                                    label: 'User 5',
+                                    items: [{label: 'User 5.1'}, {label: 'User 5.2'}]
+                                },
+                                {
+                                    label: 'User 6',
+                                    items: [{label: 'User 6.1'}, {label: 'User 6.2'}]
+                                }
+                            ]
+                        ]
+                    },
+                    {
+                        label: 'Events', icon: 'pi pi-fw pi-calendar',
+                        items: [
+                            [
+                                {
+                                    label: 'Event 1',
+                                    items: [{label: 'Event 1.1'}, {label: 'Event 1.2'}]
+                                },
+                                {
+                                    label: 'Event 2',
+                                    items: [{label: 'Event 2.1'}, {label: 'Event 2.2'}]
+                                }
+                            ],
+                            [
+                                {
+                                    label: 'Event 3',
+                                    items: [{label: 'Event 3.1'}, {label: 'Event 3.2'}]
+                                },
+                                {
+                                    label: 'Event 4',
+                                    items: [{label: 'Event 4.1'}, {label: 'Event 4.2'}]
+                                }
+                            ]
+                        ]
+                    },
+                    {
+                        label: 'Settings', icon: 'pi pi-fw pi-cog',
+                        items: [
+                            [
+                                {
+                                    label: 'Setting 1',
+                                    items: [{label: 'Setting 1.1'}, {label: 'Setting 1.2'}]
+                                },
+                                {
+                                    label: 'Setting 2',
+                                    items: [{label: 'Setting 2.1'}, {label: 'Setting 2.2'}]
+                                },
+                                {
+                                    label: 'Setting 3',
+                                    items: [{label: 'Setting 3.1'}, {label: 'Setting 3.2'}]
+                                }
+                            ],
+                            [
+                                {
+                                    label: 'Setting 4',
+                                    items: [{label: 'Setting 4.1'}, {label: 'Setting 4.2'}]
+                                }
+                            ]
+                        ]
+                    }
+                ]);
+
+                return { items }
+            },
+            components: {
+                "p-megamenu": primevue.megamenu
+            }
+        };
+
+        const routes = [{ path: "/", component: App }];
+
+        const router = VueRouter.createRouter({
+            history: VueRouter.createWebHashHistory(),
+            routes
+        });
+
+        createApp(App)
+            .use(router)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/menu/MenuDoc.vue b/src/views/menu/MenuDoc.vue
index c5b76c021..ddf1c2e69 100755
--- a/src/views/menu/MenuDoc.vue
+++ b/src/views/menu/MenuDoc.vue
@@ -394,6 +394,97 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <p-toast></p-toast>
+
+            <h5>Inline</h5>
+            <p-menu :model="items"></p-menu>
+
+            <h5>Overlay</h5>
+            <p-button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"></p-button>
+            <p-menu id="overlay_menu" ref="menu" :model="items" :popup="true"></p-menu>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+        const { useToast } = primevue.usetoast;
+
+        const App = {
+            setup() {
+                const toast = useToast();
+                const menu = ref();
+                const items = ref([
+                    {
+                        label: 'Options',
+                        items: [{
+                            label: 'Update',
+                            icon: 'pi pi-refresh',
+                            command: () => {
+                                toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
+                            }
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times',
+                            command: () => {
+                                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',
+                            command: () => {
+                                window.location.hash = "/fileupload"
+                            }
+                        }
+                    ]}
+                ]);
+
+                const toggle = (event) => {
+                    menu.value.toggle(event);
+                };
+                const save = () => {
+                    toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
+                };
+
+                return { items, menu, toggle, save }
+            },
+            components: {
+                "p-menu": primevue.menu,
+                "p-button": primevue.button,
+                "p-toast": primevue.toast
+            }
+        };
+
+        const routes = [{ path: "/", component: App }];
+
+        const router = VueRouter.createRouter({
+            history: VueRouter.createWebHashHistory(),
+            routes
+        });
+
+        createApp(App)
+            .use(router)
+            .use(primevue.config.default)
+            .use(primevue.toastservice)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/menubar/MenubarDoc.vue b/src/views/menubar/MenubarDoc.vue
index 741c55425..923c382c4 100755
--- a/src/views/menubar/MenubarDoc.vue
+++ b/src/views/menubar/MenubarDoc.vue
@@ -291,312 +291,479 @@ export default {
     data() {
         return {
             sources: {
-            'options-api': {
-               tabName: 'Options API Source',
-               content: `
-<template>
-    <div>
-        <Menubar :model="items">
-            <template #start>
-                <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
-            </template>
-            <template #end>
-                <InputText placeholder="Search" type="text" />
-            </template>
-        </Menubar>
-    </div>
-</template>
+				'options-api': {
+					tabName: 'Options API Source',
+					content: `
+		<template>
+			<div>
+				<Menubar :model="items">
+					<template #start>
+						<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
+					</template>
+					<template #end>
+						<InputText placeholder="Search" type="text" />
+					</template>
+				</Menubar>
+			</div>
+		</template>
 
-<script>
-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'
-                            },
+		<script>
+		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'
-                      },
-                      {
-                         separator:true
-                      },
-                      {
-                         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:'Delete',
+									icon:'pi pi-fw pi-trash'
+								},
+								{
+									separator:true
+								},
+								{
+									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:'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:'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:'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'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
-                }
-             ]
-        }
-    }
-}
-<\\/script>
-`
-            },
-            'composition-api': {
-               tabName: 'Composition API Source',
-               content: `
-<template>
-    <div>
-        <Menubar :model="items">
-            <template #start>
-                <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
-            </template>
-            <template #end>
-                <InputText placeholder="Search" type="text" />
-            </template>
-        </Menubar>
-    </div>
-</template>
+									]
+								},
+								{
+									label:'Archieve',
+									icon:'pi pi-fw pi-calendar-times',
+									items:[
+										{
+										label:'Remove',
+										icon:'pi pi-fw pi-calendar-minus'
+										}
+									]
+								}
+							]
+						},
+						{
+							label:'Quit',
+							icon:'pi pi-fw pi-power-off'
+						}
+					]
+				}
+			}
+		}
+		<\\/script>
+		`
+				},
+				'composition-api': {
+					tabName: 'Composition API Source',
+					content: `
+		<template>
+			<div>
+				<Menubar :model="items">
+					<template #start>
+						<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
+					</template>
+					<template #end>
+						<InputText placeholder="Search" type="text" />
+					</template>
+				</Menubar>
+			</div>
+		</template>
 
-<script>
-import { ref } from 'vue';
+		<script>
+		import { ref } from 'vue';
 
-export default {
-    setup() {
-        const items = ref([
-            {
-               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'
-                    },
-                    {
-                        separator:true
-                    },
-                    {
-                        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'
-                            }
-                        ]
-                    }
-               ]
-            },
-            {
-               label:'Quit',
-               icon:'pi pi-fw pi-power-off'
-            }
-        ]);
+		export default {
+			setup() {
+				const items = ref([
+					{
+					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'
+							},
+							{
+								separator:true
+							},
+							{
+								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'
+									}
+								]
+							}
+						]
+					},
+					{
+						label:'Quit',
+						icon:'pi pi-fw pi-power-off'
+					}
+				]);
 
-        return { items }
-    }
-}
-<\\/script>
-`
-            }
-         }
+				return { items }
+			}
+		}
+		<\\/script>
+		`
+				},
+				'browser-source': {
+					tabName: 'Browser Source',
+					imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
+		<script src="https://unpkg.com/primevue@^3/menubar/menubar.min.js"><\\/script>`,
+					content: `
+		<div id="app">
+			<p-menubar :model="items">
+				<template #start>
+					<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
+				</template>
+				<template #end>
+					<p-inputtext placeholder="Search" type="text"></p-inputtext>
+				</template>
+			</p-menubar>
+		</div>
+
+		<script type="module">
+		const { createApp, ref } = Vue;
+
+		const App = {
+			setup() {
+				const items = ref([
+					{
+						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'
+							},
+							{
+								separator:true
+							},
+							{
+								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'
+									}
+								]
+							}
+						]
+					},
+					{
+						label:'Quit',
+						icon:'pi pi-fw pi-power-off'
+					}
+				]);
+
+				return { items }
+			},
+			components: {
+				"p-menubar": primevue.menubar,
+				"p-inputtext": primevue.inputtext
+			}
+		};
+
+		const routes = [{ path: "/", component: App }];
+
+        const router = VueRouter.createRouter({
+            history: VueRouter.createWebHashHistory(),
+            routes
+        });
+
+		createApp(App)
+			.use(router)
+            .use(primevue.config.default)
+            .mount("#app");
+		<\\/script>
+		`
+				}
+			}
         }
     }
 }
diff --git a/src/views/panelmenu/PanelMenuDoc.vue b/src/views/panelmenu/PanelMenuDoc.vue
index 412bd3152..3065ff3fa 100755
--- a/src/views/panelmenu/PanelMenuDoc.vue
+++ b/src/views/panelmenu/PanelMenuDoc.vue
@@ -843,6 +843,207 @@ export default {
     width: 22rem;
 }
 </style>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/panelmenu/panelmenu.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Default</h5>
+            <p-panelmenu :model="items"></p-panelmenu>
+
+            <h5>Programmatic</h5>
+            <div class="p-mb-3">
+                <p-button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2"></p-button>
+                <p-button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></p-button>
+                </div>
+            <p-panelmenu :model="items" :expanded-keys="expandedKeys"></p-panelmenu>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const expandedKeys = ref({});
+                const items = ref([{
+                        key: '0',
+                        label: 'File',
+                        icon: 'pi pi-fw pi-file',
+                        items: [{
+                                key: '0_0',
+                                label: 'New',
+                                icon: 'pi pi-fw pi-plus',
+                                items: [{
+                                        key: '0_0_0',
+                                        label: 'Bookmark',
+                                        icon: 'pi pi-fw pi-bookmark'
+                                    },
+                                    {
+                                        key: '0_0_1',
+                                        label: 'Video',
+                                        icon: 'pi pi-fw pi-video'
+                                    }
+                                ]
+                            },
+                            {
+                                key: '0_1',
+                                label: 'Delete',
+                                icon: 'pi pi-fw pi-trash'
+                            },
+                            {
+                                key: '0_2',
+                                label: 'Export',
+                                icon: 'pi pi-fw pi-external-link'
+                            }
+                        ]
+                    },
+                    {
+                        key: '1',
+                        label: 'Edit',
+                        icon: 'pi pi-fw pi-pencil',
+                        items: [{
+                                key: '1_0',
+                                label: 'Left',
+                                icon: 'pi pi-fw pi-align-left'
+                            },
+                            {
+                                key: '1_1',
+                                label: 'Right',
+                                icon: 'pi pi-fw pi-align-right'
+                            },
+                            {
+                                key: '1_2',
+                                label: 'Center',
+                                icon: 'pi pi-fw pi-align-center'
+                            },
+                            {
+                                key: '1_3',
+                                label: 'Justify',
+                                icon: 'pi pi-fw pi-align-justify'
+                            }
+                        ]
+                    },
+                    {
+                        key: '2',
+                        label: 'Users',
+                        icon: 'pi pi-fw pi-user',
+                        items: [{
+                                key: '2_0',
+                                label: 'New',
+                                icon: 'pi pi-fw pi-user-plus',
+
+                            },
+                            {
+                                key: '2_1',
+                                label: 'Delete',
+                                icon: 'pi pi-fw pi-user-minus',
+                            },
+                            {
+                                key: '2_2',
+                                label: 'Search',
+                                icon: 'pi pi-fw pi-users',
+                                items: [{
+                                        key: '2_2_0',
+                                        label: 'Filter',
+                                        icon: 'pi pi-fw pi-filter',
+                                        items: [{
+                                            key: '2_2_0_0',
+                                            label: 'Print',
+                                            icon: 'pi pi-fw pi-print'
+                                        }]
+                                    },
+                                    {
+                                        key: '2_2_1',
+                                        icon: 'pi pi-fw pi-bars',
+                                        label: 'List'
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        key: '3',
+                        label: 'Events',
+                        icon: 'pi pi-fw pi-calendar',
+                        items: [{
+                                key: '3_0',
+                                label: 'Edit',
+                                icon: 'pi pi-fw pi-pencil',
+                                items: [{
+                                        key: '3_0_0',
+                                        label: 'Save',
+                                        icon: 'pi pi-fw pi-calendar-plus'
+                                    },
+                                    {
+                                        key: '3_0_0',
+                                        label: 'Delete',
+                                        icon: 'pi pi-fw pi-calendar-minus'
+                                    }
+                                ]
+                            },
+                            {
+                                key: '3_1',
+                                label: 'Archieve',
+                                icon: 'pi pi-fw pi-calendar-times',
+                                items: [{
+                                    key: '3_1_0',
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }]
+                            }
+                        ]
+                    }
+                ]);
+
+                const expandAll = () => {
+                    for (let node of nodes.value) {
+                        expandNode(node);
+                    }
+
+                    expandedKeys.value = {...expandedKeys.value};
+                };
+                const collapseAll = () => {
+                    expandedKeys.value = {};
+                };
+                const expandNode = (node) => {
+                    if (node.children && node.children.length) {
+                        expandedKeys.value[node.key] = true;
+
+                        for (let child of node.children) {
+                            expandNode(child);
+                        }
+                    }
+                };
+
+                return { items, expandedKeys, expandAll, collapseAll, expandNode }
+            },
+            components: {
+                "p-panelmenu": primevue.panelmenu,
+                "p-button": primevue.button
+            }
+        };
+
+        const routes = [{ path: "/", component: App }];
+
+        const router = VueRouter.createRouter({
+            history: VueRouter.createWebHashHistory(),
+            routes
+        });
+
+        createApp(App)
+            .use(router)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style scoped lang="scss">
+        .p-panelmenu {
+            width: 22rem;
+        }
+        </style>
 `
                 }
             }
diff --git a/src/views/steps/StepsDoc.vue b/src/views/steps/StepsDoc.vue
index b4a1f965f..73bd00679 100755
--- a/src/views/steps/StepsDoc.vue
+++ b/src/views/steps/StepsDoc.vue
@@ -323,6 +323,399 @@ export default {
 </style>
 `
                 },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/steps/steps.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/card/card.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/inputnumber/inputnumber.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/inputmask/inputmask.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <p-toast></p-toast>
+
+            <div class="card">
+                <p-steps :model="items" :readonly="true"></p-steps>
+            </div>
+
+            <router-view v-slot="{Component}" :form-data="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
+                <keep-alive>
+                    <component :is="Component"></component>
+                </keep-alive>
+            </router-view>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+        const { useToast } = primevue.usetoast;
+
+        const App = {
+            setup() {
+                const toast = useToast();
+                const items = ref([
+                    {
+                        label: 'Personal',
+                        to: "/"
+                    },
+                    {
+                        label: 'Seat',
+                        to: "/seat",
+                    },
+                    {
+                        label: 'Payment',
+                        to: "/payment",
+                    },
+                    {
+                        label: 'Confirmation',
+                        to: "/confirmation",
+                    }
+                ]);
+                const formObject = ref({});
+
+                const nextPage = (event) => {
+                    for (let field in event.formData) {
+                        formObject.value[field] = event.formData[field];
+                    }
+
+                    router.push(items.value[event.pageIndex + 1].to);
+                };
+                const prevPage = (event) => {
+                    router.push(items.value[event.pageIndex - 1].to);
+                };
+                const complete = () => {
+                    toast.add({severity:'success', summary:'Order submitted', detail: 'Dear, ' + formObject.value.firstname + ' ' + formObject.value.lastname + ' your order completed.'});
+                };
+
+                return { items, formObject, nextPage, prevPage, complete }
+            },
+            components: {
+                "p-steps": primevue.steps,
+                "p-toast": primevue.toast,
+                "p-card": primevue.card
+            }
+        };
+
+        const Personal = {
+            template: \`<div class="stepsdemo-content">
+                <p-card>
+                    <template v-slot:title>
+                        Personal Information
+                    </template>
+                    <template v-slot:subtitle>
+                        Enter your personal information
+                    </template>
+                    <template v-slot:content>
+                        <div class="p-fluid">
+                            <div class="p-field">
+                                <label for="firstname">Firstname</label>
+                                <p-inputtext id="firstname" v-model="firstname" :class="{'p-invalid': validationErrors.firstname && submitted}"></p-inputtext>
+                                <small v-show="validationErrors.firstname && submitted" class="p-error">Firstname is required.</small>
+                            </div>
+                            <div class="p-field">
+                                <label for="lastname">Lastname</label>
+                                <p-inputtext id="lastname" v-model="lastname" :class="{'p-invalid': validationErrors.lastname && submitted}"></p-inputtext>
+                                <small v-show="validationErrors.lastname && submitted" class="p-error">Lastname is required.</small>
+                            </div>
+                            <div class="p-field">
+                                <label for="age">Age</label>
+                                <p-inputnumber id="age" v-model="age"></p-inputnumber>
+                            </div>
+                        </div>
+                    </template>
+                    <template v-slot:footer>
+                        <div class="p-grid p-nogutter p-justify-between">
+                            <i></i>
+                            <p-button label="Next" @click="nextPage()" icon="pi pi-angle-right" icon-pos="right"></p-button>
+                        </div>
+                    </template>
+                </p-card>
+            </div>\`,
+            data () {
+                return {
+                    firstname: '',
+                    lastname: '',
+                    age: null,
+                    submitted: false,
+                    validationErrors: {}
+                }
+            },
+            methods: {
+                nextPage() {
+                    this.submitted = true;
+                    if (this.validateForm() ) {
+                        this.$emit('next-page', {formData: {firstname: this.firstname, lastname: this.lastname, age: this.age}, pageIndex: 0});
+                    }
+                },
+                validateForm() {
+                    if (!this.firstname.trim())
+                        this.validationErrors['firstname'] = true;
+                    else
+                        delete this.validationErrors['firstname'];
+
+                    if (!this.lastname.trim())
+                        this.validationErrors['lastname'] = true;
+                    else
+                        delete this.validationErrors['lastname'];
+
+                    return !Object.keys(this.validationErrors).length;
+                }
+            },
+            components: {
+                "p-card": primevue.card,
+                "p-inputtext": primevue.inputtext,
+                "p-inputnumber": primevue.inputnumber,
+                "p-button": primevue.button 
+            }
+        };
+
+        const Seat = {
+            template: \`<div class="stepsdemo-content">
+                <p-card>
+                <template v-slot:title>
+                        Seat Information
+                    </template>
+                    <template v-slot:subtitle>
+                        Choose your seat
+                    </template>
+                    <template v-slot:content>
+                        <div class="p-fluid p-formgrid p-grid">
+                            <div class="p-field p-col-12 p-md-6">
+                                <label for="class">Class</label>
+                                <p-dropdown input-id="class" v-model="selectedClass" :options="classes" @change="setWagons($event)" option-label="name" placeholder="Select a Class"></p-dropdown>
+                            </div>
+                            <div class="p-field p-col-12 p-md-6">
+                                <label for="lastname">Wagon</label>
+                                <p-dropdown input-id="wagon" v-model="selectedWagon" :options="wagons" @change="setSeats($event)" option-label="wagon" placeholder="Select a Wagon"></p-dropdown>
+                            </div>
+                            <div class="p-field p-col-12">
+                                <label for="seat">Seat</label>
+                                <p-dropdown input-id="seat" v-model="selectedSeat" :options="seats" option-label="seat" placeholder="Select a Seat"></p-dropdown>
+                            </div>
+                        </div>
+                    </template>
+                    <template v-slot:footer>
+                        <div class="p-grid p-nogutter p-justify-between">
+                            <p-button label="Back" @click="prevPage()" icon="pi pi-angle-left"></p-button>
+                            <p-button label="Next" @click="nextPage()" icon="pi pi-angle-right" icon-pos="right"></p-button>
+                        </div>
+                    </template>
+                </p-card>
+            </div>\`,
+            data() {
+                return {
+                    selectedClass: '',
+                    classes: [
+                        {name: 'First Class', code: 'A', factor: 1},
+                        {name: 'Second Class', code: 'B', factor: 2},
+                        {name: 'Third Class', code: 'C', factor: 3}
+                    ],
+                    wagons: [],
+                    selectedWagon: '',
+                    seats: [],
+                    selectedSeat: ''
+                }
+            },
+            methods: {
+                setWagons(event) {
+                    if (this.selectedClass && event.value) {
+                        this.wagons = [];
+                        this.seats = [];
+                        for (let i = 1; i < 3 * event.value.factor; i++) {
+                            this.wagons.push({wagon: i + event.value.code, type: event.value.name, factor: event.value.factor});
+                        }
+                    }
+                },
+                setSeats(event) {
+                    if (this.selectedWagon && event.value) {
+                        this.seats = [];
+                        for (let i = 1; i < 10 * event.value.factor; i++) {
+                            this.seats.push({seat: i, type: event.value.type});
+                        }
+                    }
+                },
+                nextPage() {
+                    this.$emit('next-page', {formData: {class: this.selectedClass.name, wagon: this.selectedWagon.wagon, seat: this.selectedSeat.seat}, pageIndex: 1});
+                },
+                prevPage() {
+                    this.$emit('prev-page', {pageIndex: 1});
+                }
+            },
+            components: {
+                "p-card": primevue.card,
+                "p-dropdown": primevue.dropdown,
+                "p-button": primevue.button
+            }
+        };
+
+        const Payment = {
+            template: \`<div class="stepsdemo-content">
+                <p-card>
+                    <template v-slot:title>
+                        Payment Information
+                    </template>
+                    <template v-slot:subtitle>
+                        Enter your card details
+                    </template>
+                    <template v-slot:content>
+                        <div class="p-fluid p-formgrid p-grid">
+                            <div class="p-field p-col-12">
+                                <label for="class">Card Holder Name</label>
+                                <p-inputtext type="text" v-model="cardholderName"></p-inputext>
+                            </div>
+                            <div class="p-field p-col-8">
+                                <label id="number" for="lastname">Number</label>
+                                <p-inputmask id="number" mask="9999-9999-9999-9999" v-model="cardholderNumber"></p-inputmask>
+                            </div>
+                            <div class="p-field p-col-2">
+                                <label id="date" for="date">Date</label>
+                                <p-inputmask id="date" mask="99/99" v-model="date"></p-inputmask>
+                            </div>
+                            <div class="p-field p-col-2">
+                                <label for="cvv">CVV</label>
+                                <p-inputmask id="cvv" mask="999" v-model="cvv"></p-inputmask>
+                            </div>
+                            <div class="p-field-checkbox p-col-12">
+                                <p-checkbox id="remember" v-model="remember" :binary="true"></p-checkbox>
+                                <label for="remember" class="p-checkbox-label">Save credit card information for future</label>
+                            </div>
+                        </div>
+                    </template>
+                    <template v-slot:footer>
+                        <div class="p-grid p-nogutter p-justify-between">
+                            <p-button label="Back" @click="prevPage()" icon="pi pi-angle-left"></p-button>
+                            <p-button label="Next" @click="nextPage()" icon="pi pi-angle-right" icon-pos="right"></p-button>
+                        </div>
+                    </template>
+                </p-card>
+            </div>\`,
+            data() {
+                return {
+                    cardholderName:'',
+                    cardholderNumber:'',
+                    date:'',
+                    cvv:'',
+                    remember:false
+                }
+            },
+            methods: {
+                nextPage() {
+                    this.$emit('next-page', {formData: {cardholderName: this.cardholderName, cardholderNumber: this.cardholderNumber, date: this.date, cvv: this.cvv}, pageIndex: 2});
+                },
+                prevPage() {
+                    this.$emit('prev-page', {pageIndex: 2});
+                }
+            },
+            components: {
+                "p-card": primevue.card,
+                "p-inputtext": primevue.inputtext,
+                "p-inputmask": primevue.inputmask,
+                "p-checkbox": primevue.checkbox,
+                "p-button": primevue.button
+            }
+        };
+
+        const Confirmation = {
+            template: \`<div class="stepsdemo-content">
+                <p-card>
+                    <template v-slot:title>
+                        Confirmation
+                    </template>
+                    <template v-slot:content>
+                        <div class="p-field p-col-12">
+                            <label for="class">Name</label>
+                            <b>{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}</b>
+                        </div>
+                        <div class="p-field p-col-12">
+                            <label for="Age">Age</label>
+                            <b>{{formData.age ? formData.age : '-'}}</b>
+                        </div>
+                        <div class="p-field p-col-12">
+                            <label for="Age">Seat Class</label>
+                            <b>{{formData.class ? formData.class : '-'}}</b>
+                        </div>
+                        <div class="p-field p-col-12">
+                            <label for="Age">Wagon Number</label>
+                            <b>{{formData.vagon ? formData.vagon : '-'}}</b>
+                        </div>
+                        <div class="p-field p-col-12">
+                            <label for="Age">Seat</label>
+                            <b>{{formData.seat ? formData.seat : '-'}}</b>
+                        </div>
+                        <div class="p-field p-col-12">
+                            <label for="Age">Cardholder Name</label>
+                            <b>{{formData.cardholderName ? formData.cardholderName : '-'}}</b>
+                        </div>
+                        <div class="p-field p-col-12">
+                            <label for="Age">Card Number</label>
+                            <b>{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}</b>
+                        </div>
+                        <div class="p-field p-col-12">
+                            <label for="Age">Date</label>
+                            <b>{{formData.date ? formData.date : '-'}}</b>
+                        </div>
+                        <div class="p-field p-col-12">
+                            <label for="Age">CVV</label>
+                            <b>{{formData.cvv && formData.cvv.length === 3  ? '**' + formData.cvv[2] : '-'}}</b>
+                        </div>
+                    </template>
+                    <template v-slot:footer>
+                        <div class="p-grid p-nogutter p-justify-between">
+                            <p-button label="Back" @click="prevPage()" icon="pi pi-angle-left"></p-button>
+                            <p-button label="Complete" @click="complete()" icon="pi pi-check" icon-pos="right" class="p-button-success"></p-button>
+                        </div>
+                    </template>
+                </p-card>
+            </div>\`,
+            props: {
+                formData: Object
+            },
+            methods: {
+                prevPage() {
+                    this.$emit('prev-page', {pageIndex: 3});
+                },
+                complete() {
+                    this.$emit('complete');
+                }
+            },
+            components: {
+                "p-card": primevue.card,
+                "p-button": primevue.button
+            }
+        };
+
+        const routes = [
+            { path: "/", component: Personal },
+            { path: "/seat", component: Seat },
+            { path: "/payment", component: Payment },
+            { path: "/confirmation", component: Confirmation }
+        ];
+
+        const router = VueRouter.createRouter({
+            history: VueRouter.createWebHashHistory(),
+            routes
+        });
+
+        createApp(App)
+            .use(router)
+            .use(primevue.config.default)
+            .use(primevue.toastservice)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        b {
+            display: block;
+        }
+
+        .p-card-body {
+            padding: 2rem;
+        }
+        </style>
+`
+                }
             },
             pages: [
                     {
diff --git a/src/views/tabmenu/TabMenuDoc.vue b/src/views/tabmenu/TabMenuDoc.vue
index 7eaacae45..c3f07d324 100755
--- a/src/views/tabmenu/TabMenuDoc.vue
+++ b/src/views/tabmenu/TabMenuDoc.vue
@@ -385,6 +385,151 @@ export default {
     padding: 2rem 1rem;
 }
 </style>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/tabmenu/tabmenu.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <div class="card">
+                <h5>Default</h5>
+                <p-tabmenu :model="items"></p-tabmenu>
+                <router-view></router-view>
+            </div>
+                
+            <div class="card">
+                <h5>Programmatic</h5>
+                <div class="p-py-2">
+                    <p-button @click="active = 0" class="p-button-text" label="Activate 1st"></p-button>
+                    <p-button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd"></p-button>
+                    <p-button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd"></p-button>
+                </div>
+
+                <p-tabmenu :model="items2" v-model:active-index="active"></p-tabmenu>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const active = ref(3);
+                const items = ref([
+                    {
+                        label: 'Home',
+                        icon: 'pi pi-fw pi-home',
+                        to: '/'
+                    },
+                    {
+                        label: 'Calendar',
+                        icon: 'pi pi-fw pi-calendar',
+                        to: '/calendar'
+                    },
+                    {
+                        label: 'Edit',
+                        icon: 'pi pi-fw pi-pencil',
+                        to: '/edit'
+                    },
+                    {
+                        label: 'Documentation',
+                        icon: 'pi pi-fw pi-file',
+                        to: '/documentation'
+                    },
+                    {
+                        label: 'Settings',
+                        icon: 'pi pi-fw pi-cog',
+                        to: '/settings'
+                    }
+                ]);
+                const items2 = ref([
+                    {
+                        label: 'Home',
+                        icon: 'pi pi-fw pi-home'
+                    },
+                    {
+                        label: 'Calendar',
+                        icon: 'pi pi-fw pi-calendar'
+                    },
+                    {
+                        label: 'Edit',
+                        icon: 'pi pi-fw pi-pencil'
+                    },
+                    {
+                        label: 'Documentation',
+                        icon: 'pi pi-fw pi-file'
+                    },
+                    {
+                        label: 'Settings',
+                        icon: 'pi pi-fw pi-cog'
+                    }
+                ]);
+                
+                return { active, items, items2 }
+            },
+            components: {
+                "p-tabmenu": primevue.tabmenu,
+                "p-button": primevue.button
+            }
+        };
+
+        const Home = {
+            template: \`<div class="tabmenudemo-content">
+                <h5>Home Component Content</h5>
+            </div>\`
+        };
+
+        const Calendar = {
+            template: \`<div class="tabmenudemo-content">
+                <h5>Calendar Component Content</h5>
+            </div>\`
+        };
+
+        const Edit = {
+            template: \`<div class="tabmenudemo-content">
+                <h5>Edit Component Content</h5>
+            </div>\`
+        };
+
+        const Documentation = {
+            template: \`<div class="tabmenudemo-content">
+                <h5>Documentation Component Content</h5>
+            </div>\`
+        };
+
+        const Settings = {
+            template: \`<div class="tabmenudemo-content">
+                <h5>Settings Component Content</h5>
+            </div>\`
+        };
+
+        const routes = [
+            { path: "/", component: Home },
+            { path: "/home", component: Home },
+            { path: "/calendar", component: Calendar },
+            { path: "/edit", component: Edit },
+            { path: "/documentation", component: Documentation },
+            { path: "/settings", component: Settings }
+        ];
+
+        const router = VueRouter.createRouter({
+            history: VueRouter.createWebHashHistory(),
+            routes
+        });
+
+        createApp(App)
+            .use(router)
+            .use(primevue.config.default)
+            .mount("#app");
+
+        <\\/script>
+
+        <style>
+        .tabmenudemo-content {
+            padding: 2rem 1rem;
+        }
+        </style>`
                 }
             },
             pages: [