MenuBar Styling

UI Components for Angular
Post Reply
Posts: 8
Joined: 12 May 2016, 06:45

24 May 2016, 23:52

Hi All,

Is there a way to add components to the right most corner of the bar ? I basically want to add bunch of menu at the left corner and on the right corner leaving the center empty. Also any way to increase GAP between each menu ?


User avatar
Posts: 583
Joined: 23 Nov 2015, 21:20

25 May 2016, 09:15


The code below is make your items float right of the menu.

Code: Select all

.ui-menu .ui-menuitem {
    float: right;
what you mean by gap between menu's is it Gap between each menu items ?

Posts: 18478
Joined: 05 Jan 2009, 00:21
Location: Cybertron

25 May 2016, 13:18

Do you want to add custom content to the right side like; ... ubar.xhtml

Posts: 8
Joined: 12 May 2016, 06:45

25 May 2016, 17:22

Thanks for your reply. I don't want to add custom components but couple of more menu items and a button at the right most corner. Is that possible ?
By gap i mean space between consecutive menu items.

Is there a way to provide inline styling to each menu that i add to the bar ?

Posts: 1
Joined: 27 May 2016, 13:04

27 May 2016, 13:12

Hi Arnab. To add space between each menu item, in the component's corresponding css you can use the `host` selector and avoid the first child element (the menu title) with the following:

Code: Select all

:host .ui-menuitem li:not(:first-child) {
  margin-top: 20px;


Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests