Modena Documentation


Modena provides a multi-level menu positioned at the left side of the screen. This menu is responsive and adjusts to the screen width automatically. Menu is actually a PrimeFaces component specifically created for Modena under namespace having menu as the tag name, usage is same as a regular PrimeFaces component that utilizes p:submenu and p:menuitem components. This component is placed inside the Modena theme jar so this jar must be in your classpath. Demo application features an example menu created declaratively however since it is a JSF component, you can also use PrimeFaces MenuModel API to create the menu dynamically.

Menu is stateful by default, for state saving to work, explicit ids must be given to each submenu and menuitem. In case you'd like clean the state, call Modena.clearMenuState() method with javascript.

In addition, jQuery and PrimeFaces.js files must be available on the page for menu to work. These files are included automatically whenever there is a PrimeFaces component on the page that depends on them, however you can easily add them manually if required using h:outputScript component with name attribute as jquery/jquery.js and primefaces.js under primefaces library. An example would be <h:outputScript name="jquery/jquery.js" library="primefaces" />

+1 888 123 4567