vuejs3menubarprimevue

PrimeVue3 Menubar set item to align right


I have a prime vue menubar with 3 tabs that align to the left

HTML

<Menubar :model="items" />

.vue file

export default {
    data() {
        return {
            items: [
                {
                   label:'Users',
                   icon:'pi pi-fw pi-user',

                },
                {
                   label:'Events',
                   icon:'pi pi-fw pi-calendar',
                  },

                {
                   label:'Settings',
                   icon:'pi pi-fw pi-cog'
                }
             ]
        }
    }
}

I want to move the settings tab to the right how would I do this? I tried adding to below the settings label. There is no examples in the docs

style:{'margin-right': 'auto'}

Solution

  • I know it's a bit late, but just faced this problem today.

    One way of doing it would be to set some CSS styles to modify the original .p-menubar-button and .p-menubar-root-list:

    .p-menubar-root-list, .p-menubar-button {
      position: absolute;
      right: 0;
    }
    

    This will force the items to be on the rigth. But be careful because it does not work if you are using the end template (or at least for the quick test I did, it was not working).