Notification badge on p:menuitem

Post Reply
Posts: 2
Joined: 20 May 2015, 09:57
Location: Valencia (Spain)

22 Mar 2017, 12:13

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

Code: Select all

 <div class="inbox-labels">
      <li class="clearfix">
        <span class="inbox-label">Work</span>
        <span class="inbox-label-badge">4</span>
      <li class="clearfix">
        <span class="inbox-label">Personel</span>
        <span class="inbox-label-badge">2</span>
      <li class="clearfix">
        <span class="inbox-label">Shared</span>
        <span class="inbox-label-badge">3</span>
      <li class="clearfix">
        <span class="inbox-label">General</span>
        <span class="inbox-label-badge">5</span>
But those elements doesn't has the menu effects (onhover,...). Is there anyway to put a notification badge on p:menuitem?
Senior software engineer at

Posts: 4121
Joined: 29 Jun 2013, 12:38

23 Mar 2017, 10:58

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, of PrimeFaces (to add an attribute to p:menuitem) and of Morpheus(to add <span class="topbar-badge">..</span> into DOM)

Post Reply

Return to “Morpheus - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest