I recently installed Primeng.

I’m trying to use p-menubar component aka Menubar, I read on docs that there’s the possibility to customize menu items using ng-template but the moment I add “sub-items” (the nested menu items), it applies the same style of the “main” items.

This is what I have right now:

<p-menubar [model]="menuItems">
    <ng-template pTemplate="item" let-item>
        <p style="color: white; padding: 0 10px">{{ item.label }}</p>
    </ng-template>
</p-menubar>

what happens here is that I have a blue background so I set menu items’ color to white, unfortunately it applies even to sub-menu, where the background color is white as well, and it makes the text unreadable.

Is there a way to define a second template to customize the submenu items or to keep the style only on the “main” items?

I tried to edit the css but I couldn’t achieve the expected result since they’re the same element.