Primefaces menubar vertical separator

Question

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.

Answer 1

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.

Answer 2

Try this:

<p:spacer width="1" height="22" style="position: relative; bottom: -5px;background-color: #A8A8A8; margin-left: 10px;margin-right: 10px" />