PrimeNG p-menubar align one item to right - css

Question

I'm working with PrimeNG 8.1.1 and I would like to push one of the items to the right side (the submenu of logout, and profile).
Any suggeestions please?
this._menuItems = [
{
label: 'Dashboard',
routerLink: '/dashboard'
},
{
icon:'pi pi-fw pi-user',
items: [
{
label: 'Profile',
icon: 'pi pi-fw pi-user',
command:()=> this.profile(),
},
{
label: 'Logout',
icon: 'pi pi-fw pi-sign-out',
command:()=> this.logout(),
}
]
}
]

Answer 1

Full disclosure: I'm new to this, so this may not be the best solution.
Tested on primeng 11.4.2
The menu bar is a flex container, so we should be able to push items around by using standard flex ideas - see Aligning flex items on MDN. As with other answers here, we make use of the style property of the menu item to control how it's displayed, in this case we need to use margin-left: auto to push the item to the right.
The problem I encountered was that the p-menubarsub component does not occupy 100% of the available width, so using margin-left by itself has no effect as there is no space available to move items around.
Once this is fixed, it seemed to work for me.
component.css
:host ::ng-deep p-menubarsub {
width: 100%;
}
component.html
<p-menubar [model]="mainMenu">
<ng-template pTemplate="start">
<h4>Welcome</h4>
</ng-template>
</p-menubar>
component.ts
export class .... {
mainMenu: MenuItem[] = [
{label: 'Left menu item'},
{label: 'Right menu item', style: {'margin-left': 'auto'}
];

Answer 2

If we check the compiled code from prime, we can see that "icon" actually just means class. This means that we can add a custom class to icon without affecting our icon.
this._menuItems = [
{
label: 'Dashboard',
routerLink: '/dashboard'
},
{
icon:'pi pi-fw pi-user',
items: [
{
label: 'Profile',
icon: 'my-margin-left pi pi-fw pi-user',
command:()=> this.profile(),
},
{
label: 'Logout',
icon: 'my-margin-left pi pi-fw pi-sign-out',
command:()=> this.logout(),
}
]
}
]
Now in our Styles.css we can simply add
.layout-wrapper .layout-menu li a > .my-margin-left {
margin-left: 25px;
}
This will add the css for all items in the menu with that class. This solution will work for both menu and submenu items.

Answer 3

For version PrimeNG 11.2.0 you have two options.
(1) Using styleClass property:
this._menuItems = [
{
label: 'Dashboard',
routerLink: '/dashboard'
},
{
icon:'pi pi-fw pi-user',
items: [
{
label: 'Profile',
icon: 'my-margin-left pi pi-fw pi-user',
command:()=> this.profile(),
},
{
label: 'Logout',
styleClass: 'p-ml-6',
icon: 'my-margin-left pi pi-fw pi-sign-out',
command:()=> this.logout(),
}
]
}
]
(2) or Using ng-template pTemplate="end" on HTML:
<p-menubar [model]="items">
<ng-template pTemplate="end">
<button type="button" pButton label="Logout" icon="pi pi-sign-out"></button>
</ng-template>
</p-menubar>