Primefaces menubar right align submenu

html css layout primefaces menubar

11,717

Solution 1

I solve it using something like this:

style="position: absolute; right: 6px;"

Just try it.

Solution 2

I ended up just forgetting the whole "options" facet and used css float instead, I hope this helps someone:

<h:body>
   <h:form>
      <p:layout fullPage="true">
         <p:layoutUnit position="north">
            <p:menubar>
               <p:submenu label="Mail">
                  <p:menuitem value="Gmail" url="http://www.google.com" />
                  <p:menuitem value="Hotmail" url="http://www.hotmail.com" />
                  <p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
               </p:submenu>
               <p:submenu label="Videos">
                  <p:menuitem value="Youtube" url="http://www.youtube.com" />
                  <p:menuitem value="Break" url="http://www.break.com" />
               </p:submenu>
               <p:submenu label="Videos2" style="float:right">
                  <p:menuitem value="Youtube" url="http://www.youtube.com" />
                  <p:menuitem value="Break" url="http://www.break.com" />
               </p:submenu>
            </p:menubar>
         </p:layoutUnit>
         <p:layoutUnit position="center">
            <h:outputText value="Hello, world." />
         </p:layoutUnit>
      </p:layout>
   </h:form>
</h:body>

enter image description here

--Shane

11,717

Author by

Shane

I am Founder and CTO of a new video game development startup called 'Twiitch'. Before Twiitch: A veteran video game programmer, with nearly 20 years of industry experience. I've worked directly on nearly every console ever made, starting on the Commodore 64, then right through the NES to PS3/Xbox360. My programming specialties are software design/architecture, 3D graphics and visualisation, large scale network architecture, AI, collision/physics, player control. I program mainly in C/C++/Objective-C, but I also love Java/Python and recently ActionScript3 for Flash. I've also been programming in Google's 'Go' language since it was announced, and I love it :D I was also one of the owners and Technical Director of Blue Tongue (www.bluetongue.com), one of Australia's largest independent video game developers, before selling it to international video game publisher, THQ (NASDAQ: THQI). Blue Tongue is now one of the most successful studios inside THQ. I then moved to London for a couple of years as the THQ European Director of Technology, working many top tier video game companies, before finally moving back to Australia in my new role as the global Director of Technology for THQ. In 2010 I started Twiitch with my long time friend and business partner Steven Spagnolo (linkedin.com/in/stevenspagnolo).

Updated on July 25, 2022

Comments

Shane almost 2 years

I've discovered I can play a commandbutton in the options facet (right side of menubar), however I can't seem to add a submenu in the same way. I want an actual menu dropdown aligned to the right, not a button.

Any ideas?

No menu

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:p="http://primefaces.org/ui"
   xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head title="Primefaces Test">
   <style>
.ui-layout-north {
   z-index: 20 !important;
   overflow: visible !important;
}

.ui-layout-north .ui-layout-unit-content {
   overflow: visible !important;
}
</style>
</h:head>

<h:body>
   <h:form>
      <p:layout fullPage="true">
         <p:layoutUnit position="north">
            <p:menubar>
               <p:submenu label="Mail">
                  <p:menuitem value="Gmail" url="http://www.google.com" />
                  <p:menuitem value="Hotmail" url="http://www.hotmail.com" />
                  <p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
               </p:submenu>
               <p:submenu label="Videos">
                  <p:menuitem value="Youtube" url="http://www.youtube.com" />
                  <p:menuitem value="Break" url="http://www.break.com" />
               </p:submenu>
               <f:facet name="options">
                  <p:commandButton value="logout" />
                  <p:submenu label="Videos">
                     <p:menuitem value="Youtube" url="http://www.youtube.com" />
                     <p:menuitem value="Break" url="http://www.break.com" />
                  </p:submenu>
               </f:facet>
            </p:menubar>
         </p:layoutUnit>
         <p:layoutUnit position="center">
            <h:outputText value="Hello, world." />
         </p:layoutUnit>
      </p:layout>
   </h:form>
</h:body>
</html>

-- Shane

jwesley over 9 years

This works great until you need a nested submenu. The nested submenu will display off screen.
Travis L. Riffle almost 4 years

I just want one item to the right -> the log out button.