diff --git a/exports/menubar.d.ts b/exports/menubar.d.ts
new file mode 100644
index 000000000..ff1c3a8da
--- /dev/null
+++ b/exports/menubar.d.ts
@@ -0,0 +1 @@
+export * from './components/menubar/Menubar';
\ No newline at end of file
diff --git a/exports/menubar.js b/exports/menubar.js
new file mode 100644
index 000000000..221bbbaa7
--- /dev/null
+++ b/exports/menubar.js
@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/menubar/Menubar.vue');
\ No newline at end of file
diff --git a/src/components/menubar/Menubar.d.ts b/src/components/menubar/Menubar.d.ts
index e69de29bb..9e30f297e 100644
--- a/src/components/menubar/Menubar.d.ts
+++ b/src/components/menubar/Menubar.d.ts
@@ -0,0 +1,5 @@
+import Vue from 'vue';
+
+export declare class Menubar extends Vue {
+ model?: any[];
+}
\ No newline at end of file
diff --git a/src/views/menubar/MenubarDoc.vue b/src/views/menubar/MenubarDoc.vue
index 71f37fe31..f2d8aede9 100644
--- a/src/views/menubar/MenubarDoc.vue
+++ b/src/views/menubar/MenubarDoc.vue
@@ -4,16 +4,16 @@
<TabPanel header="Documentation">
<h3>Import</h3>
<CodeHighlight lang="javascript">
-import TieredMenu from 'primevue/menu';
+import Menubar from 'primevue/menubar';
</CodeHighlight>
<h3>MenuModel</h3>
- <p>TieredMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
+ <p>Menubar 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>TieredMenu requires a collection of menuitems as its model.</p>
+ <p>Menubar requires a collection of menuitems as its model.</p>
<CodeHighlight>
-<TieredMenu :model="items" />
+<Menubar :model="items" />
</CodeHighlight>
<CodeHighlight lang="js">
@@ -143,9 +143,6 @@ export default {
}
]
},
- {
- separator:true
- },
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
@@ -154,20 +151,6 @@ export default {
}
}
}
-</CodeHighlight>
-
- <h3>Popup Mode</h3>
- <p>TieredMenu 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>
-<Button type="button" label="Toggle" @click="toggle" />
-<TieredMenu ref="menu" :model="items" :popup="true" />
-</CodeHighlight>
-
-<CodeHighlight lang="js">
-toggle(event) {
- this.$refs.menu.toggle(event);
-}
</CodeHighlight>
<h3>Properties</h3>
@@ -188,61 +171,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 visiblity 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>
@@ -260,12 +188,16 @@ toggle(event) {
</thead>
<tbody>
<tr>
- <td>p-tieredmenu</td>
+ <td>p-menubar</td>
<td>Container element.</td>
</tr>
<tr>
- <td>p-menu-list</td>
- <td>List element.</td>
+ <td>p-menubar-root-list</td>
+ <td>Root list element.</td>
+ </tr>
+ <tr>
+ <td>p-submenu-list</td>
+ <td>Submenu list element.</td>
</tr>
<tr>
<td>p-menuitem</td>
@@ -297,12 +229,10 @@ toggle(event) {
</a>
<CodeHighlight>
<template v-pre>
-<h3>Inline</h3>
-<TieredMenu :model="items" />
-
-<h3>Overlay</h3>
-<Button type="button" label="Toggle" @click="toggle" />
-<TieredMenu ref="menu" :model="items" :popup="true" />
+<Menubar :model="items">
+ <InputText placeholder="Search" type="text" />
+ <Button label="Logout" icon="pi pi-power-off" :style="{'margin-left': '.25em'}"/>
+</Menubar>
</template>
</CodeHighlight>
@@ -433,20 +363,12 @@ export default {
}
]
},
- {
- separator:true
- },
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
]
}
- },
- methods: {
- toggle(event) {
- this.$refs.menu.toggle(event);
- }
}
}
</CodeHighlight>
diff --git a/src/views/tieredmenu/TieredMenuDoc.vue b/src/views/tieredmenu/TieredMenuDoc.vue
index 71f37fe31..978f0be53 100644
--- a/src/views/tieredmenu/TieredMenuDoc.vue
+++ b/src/views/tieredmenu/TieredMenuDoc.vue
@@ -4,7 +4,7 @@
<TabPanel header="Documentation">
<h3>Import</h3>
<CodeHighlight lang="javascript">
-import TieredMenu from 'primevue/menu';
+import TieredMenu from 'primevue/tieredmenu';
</CodeHighlight>
<h3>MenuModel</h3>
@@ -264,8 +264,8 @@ toggle(event) {
<td>Container element.</td>
</tr>
<tr>
- <td>p-menu-list</td>
- <td>List element.</td>
+ <td>p-submenu-list</td>
+ <td>Submenu list element.</td>
</tr>
<tr>
<td>p-menuitem</td>