import Menubar from 'primevue/menubar';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/menubar/menubar.min.js"></script>
Menubar uses the common MenuModel API to define the items, visit
Menubar requires a collection of menuitems as its model.
<Menubar :model="items" />
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:'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'
}
]
}
}
}
Two slots named "start" and "end" are provided to embed content before or after the menubar. In additon Menubar, offers item customization with the item template that receives the menuitem instance from the model as a parameter.
<Menubar :model="items">
<template #start>
Before
</template>
<template #item="{item}">
<a :href="item.url">{{item.label}}</a>
</template>
<template #end>
After
</template>
</Menubar>
router-link with route configuration can also be used within templating for further customization.
<Menubar :model="items">
<template #item="{item}">
<router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}">
<a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}">{{route.fullPath}}</a>
</router-link>
</template>
</Menubar>
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| model | array | null | An array of menuitems. |
| exact | boolean | true | Whether to apply 'router-link-active-exact' class if route exactly matches the item path. |
| Name | Parameters |
|---|---|
| start | - |
| end | - |
| item | item: Menuitem instance |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-menubar | Container element. |
| p-menubar-root-list | Root list element. |
| p-submenu-list | Submenu list element. |
| p-menuitem | Menuitem element. |
| p-menuitem-active | Active menuitem element. |
| p-menuitem-text | Label of a menuitem. |
| p-menuitem-icon | Icon of a menuitem. |
| p-submenu-icon | Arrow icon of a submenu. |
None.