How to add app-logo-image to primeng menubar?

user_3126520 0
Viewed 9161

I followed https://www.primefaces.org/primeng/#/menubar which is good to display menu-items that can be passed as a list. My requirement is to add App related logo image to the top-left corner. Plz can someone advise how to make this work.

ngOnInit() {
        this.items = [
            {label: 'Chart', icon: 'fa-bar-chart', routerLink: 'charts'},

and my html looks as below

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

As am just passing items as an array, may I know how to display app-logo-image.

primeng angular
5 Answers

This should help

<p-menubar [model]="items">
  <ng-template pTemplate="start">
    <img src="/assets/images/logo.png" height="40" class="p-mr-2" alt="brand logo">
  </ng-template>
  <ng-template pTemplate="end">
    <label>
      <input type="text" pInputText placeholder="Szukaj">
    </label>
    <button type="button" (click)="logout()" pButton label="Wyloguj" icon="pi pi-power-off" style="margin-left:.25em"></button>
  </ng-template>
</p-menubar>
user_35686740

What you can do is to add Custom Content :

Custom content can be placed between p-menubar tags.

Insert your logo image :

<p-menubar [model]="items">
    <img id="logo" src="https://www.primefaces.org/wp-content/uploads/fbrfg/favicon-32x32.png"/>        
</p-menubar>

Then, with a few lines of CSS, add a padding-left to the menu items and position your logo to the left :

.ui-menubar-root-list {
  padding-left:32px;
}

img#logo {
  position:absolute;
  left:0;
}

Demo

user_43593650

This worked for me. I used @Antikhippe's solution but changed scss little bit and it worked.

::ng-deep.ui-menubar .ui-menubar-root-list{
    padding-left: 13em !important;
    }
    img#logo {
      position:absolute;
      left:0;
    }
user_117700680

Depending on the situation, one may need to add some space in the left. Also, in order to fit the image within the confines of the menubar, you need to provide height and width settings.

.ui-menubar-root-list {
  padding-left: 200px;
}

img#logo {
  position: absolute;
  left: 10px;
  height: 33px;
  width: 129px;;
}
user_16325560

One more method:

<div class="layout-topbar">
    <a class="logo" href="#/">
        <img class="ng-tns-c1-0" alt="logo" src="https://www.primefaces.org/primeng/showcase/assets/showcase/images/primeng-logo-dark.svg">
    </a>
    <p-tabMenu [model]="items"></p-tabMenu> 
    <!-- it works for a p-menubar -->
    <!-- <p-menubar [model]="items"></p-menubar> -->
</div>
user_47111350
Related