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

Question

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.

so, you are wanting an image to the left of the menubar that is unassociated with a menu item? — BillF, Oct 09 '17 at 13:04
Yes plz, as logo is for the entire app, I want it at App level — nsk, Oct 31 '17 at 20:50

score 10 · Answer 1 · answered Aug 19 '20 at 00:49

10

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>

answered Aug 19 '20 at 00:49

Velemir

143
1
9

2

This works great, but where is this documented? It feels like a lot of documentation is missing, so encourage users to buy premium templates. – rolandow Aug 25 '20 at 09:21
10

I am using v11.0.0-rc.1 and this didn't work until I imported the SharedModule into my module. **import { SharedModule } from 'primeng/api';** and add it to your imports. I like this solution the best of the ones provided as it doesn't require custom CSS. – Philipo55 Nov 23 '20 at 00:10
@rolandow It's not obvious but they do have an example of this on their [menubar demo](https://primefaces.org/primeng/showcase/#/menubar). If you click on the source tab you'll see the same strategy Velemir recommends. – Matt Penner Mar 02 '21 at 17:45

score 3 · Answer 2 · answered Nov 16 '17 at 08:15

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

score 1 · Answer 3 · answered Oct 03 '19 at 06:25

1

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

answered Oct 03 '19 at 06:25

Supinder Singh

41
5

score 0 · Answer 4 · answered Feb 13 '20 at 08:08

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

Alexander Chernin · Answer 5 · 2020-08-25T09:38:33.383

0

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>

edited Aug 25 '20 at 09:38

answered Aug 25 '20 at 09:29

Alexander Chernin

446
2
8
17

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

5 Answers5

Linked