import {MegaMenu} from 'primeng/primeng';
MegaMenu requires a list element as its children where each list item defines label as an anchor and the content inside a div.
<p-megaMenu>
<ul>
<li><a data-icon="fa-check">Submenu Label</a>
<div>
Content of Submenu
</div>
</li>
</ul>
</p-megaMenu>
Content can be anything and any list element with list items are treated as submenus.
<p-megaMenu>
<ul>
<li><a data-icon="fa-check">Submenu Label</a>
<div>
Content of Submenu
<ul>
<li><h3>Child Submenu</h3></li>
<li><a><span>Label 1</span></a></li>
<li><a><span>Label 2</span></a></li>
</ul>
</div>
</li>
</ul>
</p-megaMenu>
MegaMenu submenus are displayed on hover by default, enable autoDisplay property to require a click to open a submenu initially. In this mode, until outside of megaMenu is clicked, menu goes in activated mode and submenus can be displayed using mouseover.
An icon of a menuitem is defined using data-icon attribute.
<a data-icon="fa-plus"><span>New</span></a>
MegaMenu has two orientation modes, horizontal (default) and vertical.
<p-megaMenu orientation="vertical">
Name | Type | Default | Description |
---|---|---|---|
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
autoDisplay | boolean | false | Displays submenus with mouseover, set to false to require a click to activate the menu. |
orientation | string | horizontal | Layout of megamenu, valid values are horizontal and vertical. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-megamenu | Container element. |
ui-megamenu-panel | Overlay panel of a root submenu. |
ui-menu-list | List element. |
ui-menuitem | Menuitem element. |
ui-menuitem-text | Label of a menuitem. |
ui-menuitem-icon | Icon of a menuitem. |
ui-submenu-icon | Arrow icon of a submenu. |
PrimeUI MegaMenu.
<h3 class="first">Default</h3>
<p-megaMenu>
<ul>
<li><a data-icon="fa-check">TV</a>
<div>
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-6">
<ul>
<li><h3>TV.1</h3></li>
<li><a><span>TV 1.1</span></a></li>
<li><a><span>TV 1.2</span></a></li>
</ul>
<ul>
<li><h3>TV.2</h3></li>
<li><a><span>TV 2.1</span></a></li>
<li><a><span>TV 2.2</span></a></li>
<li><img src="showcase/resources/demo/images/sopranos/sopranos1_small.jpg" alt="Sopranos"/></li>
</ul>
</div>
<div class="ui-grid-col-6">
<ul>
<li><h3>TV.3</h3></li>
<li><a><span>TV 3.1</span></a></li>
<li><a><span>TV 3.2</span></a></li>
</ul>
<ul>
<li><h3>TV.4</h3></li>
<li><a><span>TV 4.1</span></a></li>
<li><a><span>TV 4.2</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li><a data-icon="fa-soccer-ball-o">Sports</a>
<div>
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-4">
<ul>
<li><h3>Sports.1</h3></li>
<li><a><span>Sports 1.1</span></a></li>
<li><a><span>Sports 1.2</span></a></li>
</ul>
<ul>
<li><h3>Sports.2</h3></li>
<li><a><span>Sports 2.1</span></a></li>
<li><a><span>Sports 2.2</span></a></li>
</ul>
</div>
<div class="ui-grid-col-4">
<ul>
<li><h3>Sports.3</h3></li>
<li><a><span>Sports 3.1</span></a></li>
<li><a><span>Sports 3.2</span></a></li>
</ul>
<ul>
<li><h3>Sports.4</h3></li>
<li><a><span>Sports 4.1</span></a></li>
<li><a><span>Sports 4.2</span></a></li>
</ul>
</div>
<div class="ui-grid-col-4">
<ul>
<li><h3>Sports.5</h3></li>
<li><a><span>Sports 5.1</span></a></li>
<li><a><span>Sports 5.2</span></a></li>
</ul>
<ul>
<li><h3>Sports.6</h3></li>
<li><a><span>Sports 6.1</span></a></li>
<li><a><span>Sports 6.2</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li><a data-icon="fa-child">Entartainment</a>
<div>
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-6">
<ul>
<li><h3>Entartainment.1</h3></li>
<li><a><span>Entartainment 1.1</span></a></li>
<li><a><span>Entartainment 1.2</span></a></li>
</ul>
<ul>
<li><h3>Entartainment.2</h3></li>
<li><a><span>Entartainment 2.1</span></a></li>
<li><a><span>Entartainment 2.2</span></a></li>
</ul>
</div>
<div class="ui-grid-col-6">
<ul>
<li><h3>Entartainment.3</h3></li>
<li><a><span>Entartainment 3.1</span></a></li>
<li><a><span>Entartainment 3.2</span></a></li>
</ul>
<ul>
<li><h3>Entartainment.4</h3></li>
<li><a><span>Entartainment 4.1</span></a></li>
<li><a><span>Entartainment 4.2</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li><a data-icon="fa-gears">Tech</a>
<div>
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-6">
<ul>
<li><h3>Tech.1</h3></li>
<li><a><span>Tech 1.1</span></a></li>
<li><a><span>Tech 1.2</span></a></li>
</ul>
<ul>
<li><h3>Tech.2</h3></li>
<li><a><span>Tech 2.1</span></a></li>
<li><a><span>Tech 2.2</span></a></li>
</ul>
</div>
<div class="ui-grid-col-6">
<ul>
<li><h3>Tech.3</h3></li>
<li><a><span>Tech 3.1</span></a></li>
<li><a><span>Tech 3.2</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</p-megaMenu>
<h3>Vertical</h3>
<p-megaMenu orientation="vertical" [autoDisplay]="false">
<ul>
<li><a data-icon="fa-check">TV</a>
<div>
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-6">
<ul>
<li><h3>TV.1</h3></li>
<li><a><span>TV 1.1</span></a></li>
<li><a><span>TV 1.2</span></a></li>
</ul>
<ul>
<li><h3>TV.2</h3></li>
<li><a><span>TV 2.1</span></a></li>
<li><a><span>TV 2.2</span></a></li>
<li><img src="showcase/resources/demo/images/sopranos/sopranos1_small.jpg" alt="Sopranos"/></li>
</ul>
</div>
<div class="ui-grid-col-6">
<ul>
<li><h3>TV.3</h3></li>
<li><a><span>TV 3.1</span></a></li>
<li><a><span>TV 3.2</span></a></li>
</ul>
<ul>
<li><h3>TV.4</h3></li>
<li><a><span>TV 4.1</span></a></li>
<li><a><span>TV 4.2</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li><a data-icon="fa-soccer-ball-o">Sports</a>
<div>
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-4">
<ul>
<li><h3>Sports.1</h3></li>
<li><a><span>Sports 1.1</span></a></li>
<li><a><span>Sports 1.2</span></a></li>
</ul>
<ul>
<li><h3>Sports.2</h3></li>
<li><a><span>Sports 2.1</span></a></li>
<li><a><span>Sports 2.2</span></a></li>
</ul>
</div>
<div class="ui-grid-col-4">
<ul>
<li><h3>Sports.3</h3></li>
<li><a><span>Sports 3.1</span></a></li>
<li><a><span>Sports 3.2</span></a></li>
</ul>
<ul>
<li><h3>Sports.4</h3></li>
<li><a><span>Sports 4.1</span></a></li>
<li><a><span>Sports 4.2</span></a></li>
</ul>
</div>
<div class="ui-grid-col-4">
<ul>
<li><h3>Sports.5</h3></li>
<li><a><span>Sports 5.1</span></a></li>
<li><a><span>Sports 5.2</span></a></li>
</ul>
<ul>
<li><h3>Sports.6</h3></li>
<li><a><span>Sports 6.1</span></a></li>
<li><a><span>Sports 6.2</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li><a data-icon="fa-child">Entartainment</a>
<div>
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-6">
<ul>
<li><h3>Entartainment.1</h3></li>
<li><a><span>Entartainment 1.1</span></a></li>
<li><a><span>Entartainment 1.2</span></a></li>
</ul>
<ul>
<li><h3>Entartainment.2</h3></li>
<li><a><span>Entartainment 2.1</span></a></li>
<li><a><span>Entartainment 2.2</span></a></li>
</ul>
</div>
<div class="ui-grid-col-6">
<ul>
<li><h3>Entartainment.3</h3></li>
<li><a><span>Entartainment 3.1</span></a></li>
<li><a><span>Entartainment 3.2</span></a></li>
</ul>
<ul>
<li><h3>Entartainment.4</h3></li>
<li><a><span>Entartainment 4.1</span></a></li>
<li><a><span>Entartainment 4.2</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li><a data-icon="fa-gears">Tech</a>
<div>
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-6">
<ul>
<li><h3>Tech.1</h3></li>
<li><a><span>Tech 1.1</span></a></li>
<li><a><span>Tech 1.2</span></a></li>
</ul>
<ul>
<li><h3>Tech.2</h3></li>
<li><a><span>Tech 2.1</span></a></li>
<li><a><span>Tech 2.2</span></a></li>
</ul>
</div>
<div class="ui-grid-col-6">
<ul>
<li><h3>Tech.3</h3></li>
<li><a><span>Tech 3.1</span></a></li>
<li><a><span>Tech 3.2</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</p-megaMenu>