diff --git a/src/components/menubar/Menubar.vue b/src/components/menubar/Menubar.vue
index 712f57df5..f83c232ac 100644
--- a/src/components/menubar/Menubar.vue
+++ b/src/components/menubar/Menubar.vue
@@ -1,9 +1,15 @@
@@ -26,6 +32,7 @@ export default {
\ No newline at end of file
diff --git a/src/views/menubar/MenubarDemo.vue b/src/views/menubar/MenubarDemo.vue
index 20d5d9e4f..c870ae7ab 100644
--- a/src/views/menubar/MenubarDemo.vue
+++ b/src/views/menubar/MenubarDemo.vue
@@ -9,8 +9,10 @@
-
-
+
+
+
+
diff --git a/src/views/menubar/MenubarDoc.vue b/src/views/menubar/MenubarDoc.vue
index e8bf0d4da..b37b7d48e 100644
--- a/src/views/menubar/MenubarDoc.vue
+++ b/src/views/menubar/MenubarDoc.vue
@@ -154,12 +154,16 @@ export default {
Custom Content
- Any content inside the megamenu will be displayed on the right side by default. You may use ".p-menubar-custom" style class to change the location of the content.
+ Two slots named "start" and "end" are provided to embed content before or after the menubar.
<Menubar :model="items">
- <InputText placeholder="Search" type="text" />
- <Button label="Logout" icon="pi pi-power-off" />
+ <template #start>
+ Before
+ </template>
+ <template #end>
+ After
+ </template>
</Menubar>
@@ -241,8 +245,10 @@ export default {
<Menubar :model="items">
- <InputText placeholder="Search" type="text" />
- <Button label="Logout" icon="pi pi-power-off" :style="{'margin-left': '.25em'}"/>
+ <template #end>
+ <InputText placeholder="Search" type="text" />
+ <Button label="Logout" icon="pi pi-power-off" :style="{'margin-left': '.25em'}"/>
+ </template>
</Menubar>