Notification badge on p:menuitem

[hecnabae]

The showcase shows an example to draw menu elements with a notification badge.

Code: Select all

 
 <div class="inbox-labels">
   <span>Labels</span>
     <ul>
      <li class="clearfix">
        <span class="inbox-label">Work</span>
        <span class="inbox-label-badge">4</span>
      </li>
      <li class="clearfix">
        <span class="inbox-label">Personel</span>
        <span class="inbox-label-badge">2</span>
      </li>
      <li class="clearfix">
        <span class="inbox-label">Shared</span>
        <span class="inbox-label-badge">3</span>
      </li>
      <li class="clearfix">
        <span class="inbox-label">General</span>
        <span class="inbox-label-badge">5</span>
      </li>
    </ul>
  </div>

But those elements doesn't has the menu effects (onhover,...). Is there anyway to put a notification badge on p:menuitem?

[mert.sincan]

Please try;

Code: Select all

.layout-wrapper .topbar .topbar-menu > li > a .topbar-icon:hover ~ .topbar-badge {
   color: red; // you can change this value or add new css
}

Is there anyway to put a notification badge on p:menuitem?

- You need to override DefaultMenuItem.java, MenuItem.java of PrimeFaces (to add an attribute to p:menuitem) and MenuRenderer.java of Morpheus(to add <span class="topbar-badge">..</span> into DOM)