cssangularprimengprimeng-menu

PrimeNG, Menubar items to the right side


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?


Solution

  • Try to override PrimeNG CSS this way:

    ::ng-deep .p-menubar {
      height: 50px;
    
      p-menubarsub {
        position: absolute;
        right: 40px;
      }
    }
    

    See demo