MegaMenu MegaMenu displays submenus of root items together.

Default

Vertical

Import


import {MegaMenu} from 'primeng/primeng';

Getting Started

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>

AutoDisplay

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.

Icons

An icon of a menuitem is defined using data-icon attribute.


<a data-icon="fa-plus"><span>New</span></a>

Orientation

MegaMenu has two orientation modes, horizontal (default) and vertical.


<p-megaMenu orientation="vertical">

Attributes

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.

Styling

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.

Dependencies

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>