CODEWITHSUNDEEP
cssangularprimeng
Youssef Najeh
Youssef Najeh

Reputation: 157

PrimeNG p-menubar align one item to right

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(),
              }
            ]
          }
        ]

Upvotes: 6

Views: 10859

Answers (4)

Sho_Lee
Sho_Lee

Reputation: 149

I have also been searching for a solution to this issue since NgPrime is not as dynamic as I initially thought. However, you can resolve it in the following way:

component.css:

:host ::ng-deep .p-menubar {
  position: relative;
  height: 8vh;
}

:host ::ng-deep .p-menubar .p-menubar-button{
  position: absolute;
  right: 0;
  top: 100%;
  transform: translateX(-50%) translateY(-135%);
}

/* modifcar tamaño Mayor a 960px */
@media screen and (min-width: 960px) {
  :host ::ng-deep  .p-menubar-root-list>li:last-child .p-submenu-list {
    right: 0;
  }

  :host ::ng-deep .p-menubar .p-menubar-root-list {
    position: absolute;
    right: 0;
    top: 100%;
    transform: translateX(-5%) translateY(-115%);
  }
}

component.html

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

with this result: enter image description here

Upvotes: 0

andrew-g-za
andrew-g-za

Reputation: 987

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'}
  ];

Upvotes: 2

danieltc07
danieltc07

Reputation: 323

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>

Upvotes: 0

Talnaci Sergiu Vlad
Talnaci Sergiu Vlad

Reputation: 982

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.

Upvotes: 0

Related Questions