PrimeIcons
Ajax Framework
Introduction
Process
PartialSubmit
Selector
Search
Validation
RemoteCommand
Observer
Poll
Fragment
Status
Lifecycle
Dropdown
WebSocket
Form
AutoComplete
CascadeSelect
Chips
ClockPicker
Inplace
InputGroup
InputMask
InputNumber
InputOtp
InputPhone
InputText
InputTextArea
KeyFilter
Keyboard
Knob
MultiSelectListBox
MonacoEditor
Password
Rating
SelectBooleanButton
SelectBooleanCheckbox
SelectOneButton
SelectOneRadio
SelectCheckboxMenu
SelectOneMenu
SelectOneListbox
SelectManyButton
SelectManyMenu
SelectManyCheckbox
Signature
Slider
Spinner
TextEditor
ToggleSwitch
TriStateCheckbox
Button
Data
Panel
Accordion
Card
Dashboard
Divider
Fieldset
NotificationBar
OutputPanel
Panel
PanelGrid
Splitter
ScrollPanel
TabView
Toolbar
Wizard
Overlay
Menu
Chart
BarNew
BubbleNew
DoughnutNew
LineNew
MixedNew
PieNew
ScatterNew
PolarAreaNew
RadarNew
CustomNew
FacetNew
ExportNew
Messages
Multimedia
File
DragDrop
Client Side Validation
Dialog Framework
Misc
MegaMenu
MegaMenu displays submenus of root items together.
<div class="card">
<h:form>
<h5>Horizontal</h5>
<p:megaMenu orientation="horizontal" autoDisplay="false">
<f:facet name="start">
<p:graphicImage name="images/primefaces-logo.svg" library="showcase" width="150"
styleClass="mt-2"/>
</f:facet>
<p:submenu label="Videos" icon="pi pi-fw pi-video">
<p:column>
<p:submenu label="Video 1">
<p:menuitem value="Video 1.1"/>
<p:menuitem value="Video 1.2"/>
</p:submenu>
<p:submenu label="Video 2">
<p:menuitem value="Video 2.1"/>
<p:menuitem value="Video 2.2"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Video 3">
<p:menuitem value="Video 3.1"/>
<p:menuitem value="Video 3.2"/>
</p:submenu>
<p:submenu label="Video 4">
<p:menuitem value="Video 4.1"/>
<p:menuitem value="Video 4.2"/>
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Users" icon="pi pi-fw pi-users">
<p:column>
<p:submenu label="User 1">
<p:menuitem value="User 1.1"/>
<p:menuitem value="User 1.2"/>
</p:submenu>
<p:submenu label="User 2">
<p:menuitem value="User 2.1"/>
<p:menuitem value="User 2.2"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="User 3">
<p:menuitem value="User 3.1"/>
<p:menuitem value="User 3.2"/>
</p:submenu>
<p:submenu label="User 4">
<p:menuitem value="User 4.1"/>
<p:menuitem value="User 4.2"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="User 5">
<p:menuitem value="User 5.1"/>
<p:menuitem value="User 5.2"/>
</p:submenu>
<p:submenu label="User 6">
<p:menuitem value="User 6.1"/>
<p:menuitem value="User 6.2"/>
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Events" icon="pi pi-fw pi-calendar">
<p:column>
<p:submenu label="Event 1">
<p:menuitem value="Event 1.1"/>
<p:menuitem value="Event 1.2"/>
</p:submenu>
<p:submenu label="Event 2">
<p:menuitem value="Event 2.1"/>
<p:menuitem value="Event 2.2"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Event 3">
<p:menuitem value="Event 3.1"/>
<p:menuitem value="Event 3.2"/>
</p:submenu>
<p:submenu label="Event 4">
<p:menuitem value="Event 4.1"/>
<p:menuitem value="Event 4.2"/>
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Settings" icon="pi pi-fw pi-cog">
<p:column>
<p:submenu label="Setting 1">
<p:menuitem value="Setting 1.1"/>
<p:menuitem value="Setting 1.2"/>
</p:submenu>
<p:submenu label="Setting 2">
<p:menuitem value="Setting 2.1"/>
<p:menuitem value="Setting 2.2"/>
</p:submenu>
<p:submenu label="Setting 3">
<p:menuitem value="Setting 3.1"/>
<p:menuitem value="Setting 3.2"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Setting 4">
<p:menuitem value="Setting 4.1"/>
<p:menuitem value="Setting 4.2"/>
</p:submenu>
</p:column>
</p:submenu>
<f:facet name="end">
<div class="ui-input-icon-left mr-2">
<i class="pi pi-fw pi-search"/>
<p:inputText placeholder="Search"/>
</div>
<p:button value="Logout" icon="pi pi-fw pi-sign-out" styleClass="ui-button-info"/>
</f:facet>
</p:megaMenu>
<h5>Vertical</h5>
<p:megaMenu orientation="vertical" autoDisplay="false">
<f:facet name="start">
<p:graphicImage name="images/primefaces-logo.svg" library="showcase" width="150"/>
</f:facet>
<p:submenu label="Videos" icon="pi pi-fw pi-video">
<p:column>
<p:submenu label="Video 1">
<p:menuitem value="Video 1.1"/>
<p:menuitem value="Video 1.2"/>
</p:submenu>
<p:submenu label="Video 2">
<p:menuitem value="Video 2.1"/>
<p:menuitem value="Video 2.2"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Video 3">
<p:menuitem value="Video 3.1"/>
<p:menuitem value="Video 3.2"/>
</p:submenu>
<p:submenu label="Video 4">
<p:menuitem value="Video 4.1"/>
<p:menuitem value="Video 4.2"/>
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Users" icon="pi pi-fw pi-users">
<p:column>
<p:submenu label="User 1">
<p:menuitem value="User 1.1"/>
<p:menuitem value="User 1.2" url="#"/>
</p:submenu>
<p:submenu label="User 2">
<p:menuitem value="User 2.1" url="#"/>
<p:menuitem value="User 2.2" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="User 3">
<p:menuitem value="User 3.1" url="#"/>
<p:menuitem value="User 3.2" url="#"/>
</p:submenu>
<p:submenu label="User 4">
<p:menuitem value="User 4.1" url="#"/>
<p:menuitem value="User 4.2" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="User 5">
<p:menuitem value="User 5.1" url="#"/>
<p:menuitem value="User 5.2" url="#"/>
</p:submenu>
<p:submenu label="User 6">
<p:menuitem value="User 6.1" url="#"/>
<p:menuitem value="User 6.2" url="#"/>
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Events" icon="pi pi-fw pi-calendar">
<p:column>
<p:submenu label="Event 1">
<p:menuitem value="Event 1.1" url="#"/>
<p:menuitem value="Event 1.2" url="#"/>
</p:submenu>
<p:submenu label="Event 2">
<p:menuitem value="Event 2.1" url="#"/>
<p:menuitem value="Event 2.2" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Event 3">
<p:menuitem value="Event 3.1" url="#"/>
<p:menuitem value="Event 3.2" url="#"/>
</p:submenu>
<p:submenu label="Event 4">
<p:menuitem value="Event 4.1" url="#"/>
<p:menuitem value="Event 4.2" url="#"/>
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Settings" icon="pi pi-fw pi-cog">
<p:column>
<p:submenu label="Setting 1">
<p:menuitem value="Setting 1.1" url="#"/>
<p:menuitem value="Setting 1.2" url="#"/>
</p:submenu>
<p:submenu label="Setting 2">
<p:menuitem value="Setting 2.1" url="#"/>
<p:menuitem value="Setting 2.2" url="#"/>
</p:submenu>
<p:submenu label="Setting 3">
<p:menuitem value="Setting 3.1" url="#"/>
<p:menuitem value="Setting 3.2" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Setting 4">
<p:menuitem value="Setting 4.1" url="#"/>
<p:menuitem value="Setting 4.2" url="#"/>
</p:submenu>
</p:column>
</p:submenu>
</p:megaMenu>
</h:form>
</div>
PrimeFaces: 14.0.8 by
PrimeTek