Primefaces menubar vertical separator

Issue

I am using PrimeFaces 3.5. There is a vertical seperator in p:toolbar (https://www.primefaces.org/showcase/ui/panel/toolbar.xhtml).

I want to use vertical seperator in p:menubar. When I use the <p:separator /> tag in p:menubar, it makes a horizontal seperator.

How can i use vertical seperator in p:menubar?

Thanks.

Solution

I did it with next css:

.ui-menu .ui-separator { 
   background: #A8A8A8; 
   border: none; 
   width: 1px; 
   clear: none; 
   height: 22px; 
   margin: 4px 6px 0; 
   box-shadow: none; 
}

The key things are width and clear. Height, background color and margin you can adjust for your preferences.

Answered By - Tsimon D