How to make a horizontal menu in PrimeFaces

Question

I am trying to modify a PrimeFaces Menu (not MenuBar) so that it displays horizontally.

I am trying to apply styles like so:

<h:form>
    <p:menu styleClass="horizontalMenu">
        <p:menuitem value="Home" url="./home.xhtml"/>
        <p:menuitem value="Contact Us" url="./contactUs.xhtml"/>
        <p:menuitem value="Shop" url="./shop.xhtml"/>
    </p:menu>
</h:form>

Where in a separate CSS file I have the following:

.horizontalMenu li {
    display:inline;
    float:none;
}

However, my styles are always overridden by PrimeFaces styles (.ui-menuitem, for example).

I was hoping for a solution that wasn't global, as I may need vertial menu's too, so this rules out editing a theme's CSS file.

possible duplicate question [http://stackoverflow.com/questions/8578494/how-to-override-stylesheets-of-primefaces/8581199#8581199](http://stackoverflow.com/questions/8578494/how-to-override-stylesheets-of-primefaces/8581199#8581199) — Ravi Kadaboina, Jan 24 '12 at 22:48
Why can you not use the [MenuBar](http://www.primefaces.org/showcase-labs/ui/menubar.jsf)? It is exactly what you are looking for? — maple_shaft, Jan 25 '12 at 11:51
The MenuBar is great except that each top level menuitem MUST have a sub menuitem. So the button like menu that most websites have cannot be implemented with a MenuBar. — Kevin, Feb 02 '12 at 04:10
I apologise, from the documentation: "menuitems as child components are required to compose the menubar." I interpreted this as MenuBars needing sub-menuitems. But I was wrong. — Kevin, Feb 02 '12 at 04:13

maple_shaft · Accepted Answer · 2012-01-25T12:14:21.180

I think its strange that you are insisting on not using the Menubar when it is the exact same thing pretty much. Perhaps this is an interview question to test your CSS and Primefaces knowledge?

Regardless, you can make a Menu component look like a Menubar like this:

<p:menu styleClass="ui-menubar" style="width: auto;">

This should override most of the styles on the menu with the ui-menubar class.

This of course will not be as good because the onhover triggered submenus will not appear below the menu as they would with the menubar.

How to make a horizontal menu in PrimeFaces

1 Answers1