[FIXED] 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">
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?


Try to override PrimeNG CSS this way:

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

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

See demo

Answered By – Antikhippe

Answer Checked By – Cary Denson (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published