PrimeNG, Menubar items to the right side

Question

I have a PrimeNG Menubar component, I want my items in the right side, they are currently on the left side, how could I align them to the right? In this case I want to align all of them to the right, not just a specific one

<p-menubar [model]="items">
</p-menubar>

export class NavigationComponent implements OnInit {
  items: MenuItem[];

  constructor() { }

  ngOnInit(): void {
    this.items = [
      {
        label: 'Solicitudes (5)',
        icon: 'pi pi-fw pi-clock'
      },
      {
        label: 'FrankHesse',
        icon: 'pi pi-fw pi-user',
        items: [
          {
            label: 'Perfil',
            icon: 'pi pi-fw pi-user'
          },
          {
            label: 'Salir',
            icon: 'pi pi-fw pi-power-off'
          }
        ]
      }
    ];
  }

}

I tried modifying the styles.scss file in the following way

#mercadeoucab .p-menuitem{
    float: right !important;
}

mercadeoucab is the ID of my body in the index.html file, however it didn't do anything, how could I accomplish this?

Answer 1

Try to override PrimeNG CSS this way:

::ng-deep .p-menubar {
  height: 50px;

  p-menubarsub {
    position: absolute;
    right: 40px;
  }
}

See demo