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?

score 1 · Answer 1 · answered Sep 23 '21 at 21:54

For me, I did it with the following CSS:

p-menubarsub{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

This will align all the items to the right, and will work well when collapsed. However, when collapsed, the sandwich menu will still show to the left, and if you also want it to go to the right, then add the following css:

 a.p-menubar-button{
    order: 3;
}

score -1 · Accepted Answer · answered Nov 12 '20 at 13:36

-1

Try to override PrimeNG CSS this way:

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

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

See demo

answered Nov 12 '20 at 13:36

Antikhippe

6,316
2
28
43

1

isn't ::ng-deep deprecated? I'm using Angular 10 and it's not working for me – FlowMafia Nov 12 '20 at 13:45
Do you use CSS or SASS? If you don't want to use `ng::deep` you can set `encapsulation: ViewEncapsulation.None` in your component (like I edited in my StackBlitz). – Antikhippe Nov 12 '20 at 13:49
I'm ussing SCSS – FlowMafia Nov 12 '20 at 13:49
1

alright, the `ViewEncapsulation` was the thing that was missing – FlowMafia Nov 12 '20 at 13:51
With this CSS, when the menu bar is collapsed the sub-menus appears missplaced – juanchavezlive Mar 18 '21 at 03:35

PrimeNG, Menubar items to the right side

2 Answers2