Mega Menu

Overview

The mega menu displays a large two-dimensional menu that has lots of room for menu options.

Mega menu display

A mega menu displays when the user presses a header mega menu button or a nav mega menu button.

• A header-based mega menu displays below the header, taking the full width of the screen but only as much height as needed to display the items.
• A nav-based mega menu displays to the right of the nav bar, taking the full height of the screen but only as much width as needed to display the items.

Mega menu types

There are two different types of mega menus:

• Simple mega menu items display a short, non-wrapping text description for each item, and can optionally be grouped under a header.
• Templated mega menu items display a small template with a few elements for each item.
  • For example, a template might display an icon, a header, and a short description for each menu item.
• You cannot mix simple mega menu items/groups and mega menu templates within the same mega menu.

Mega menu item behavior

When clicked, each item in the mega menu can either link to a view in your application or perform custom logic.

Examples

Development

Web component development

Use rui-header-mega-menu for header-based mega menus and rui-nav-mega-menu for nav-based mega menus.

rui-nav-mega-menu displays as a fly-out menu at tablet and desktop sizes, but its elements display as part of the nav menu at mobile size.

Simple Mega Menus

If you only need simple text for each option, use rui-mega-menu-item elements in your mega menu. Mega menu items display a small amount of non-wrapping text, without an icon. Mega menu items can be optionally grouped with a header, using rui-mega-menu-group elements.

Each simple mega menu contains zero or more rui-mega-menu-group elements and one or more rui-mega-menu-item elements.

There are two different use cases for simple mega menus:

• If the menu items lend themselves to grouping, then nest one or more rui-mega-menu-group elements within the mega menu, and add individual rui-mega-menu-items to each of those groups. This is often the case for static menus.
• If the sub-options are just a simple list of non-grouped items (which is often the case for a list of options returned from a service), then simply nest the rui-mega-menu-item elements directly within the mega menu without any intermediate rui-mega-menu-group elements.

If you’re grouping mega menu items within rui-mega-menu-group elements, the items in each group are always kept together; the groups flow within the menu to fit the available space. Otherwise if there are no groups, then the individual rui-mega-menu-item elements flow individually to fit the available space. Groups and items flow from top to bottom, left to right.

The rui-mega-menu-group component has headerText and route properties to specify the group’s header text and route options. You can leave headerText blank if you don’t need a header for the group. In some cases your group headers will just be static text to identify the items in the group. In other cases, the header itself is clickable (in addition to the items in that group). If the group header is clickable, then specify one of the link options for the group header. Use route if the header links to a view within this Angular app, otherwise handle the rui-mega-menu-option-click event.

The rui-mega-menu-item component has text and route properties to specify the item’s text and route options. Use route if the item links to a view within this Angular app, otherwise handle the rui-mega-menu-option-click event.

Mega menu items are always clickable, so they always display a hover effect. Mega menu group headers, however, may or may not be clickable, depending on your needs. Set the rui-mega-menu-group component’s isClickable boolean property to true in order to see a hover effect for that group.

The rui-nav-mega-menu and rui-header-mega-menu elements also support a data-col-width data attribute that specifies the width of each individual column in the menu. The default width is 200 pixels. Group headers and items are clipped if they are wider than the specified column width. Items do not wrap in order to preserve a strict grid layout. If any of your menu items are being clipped at the default column size, then specify a larger value for data-col-width.

Begin by importing the rui-mega-menu module into your application.

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-mega-menu/rui-mega-menu-imports';

Here’s an example of a simple, non-grouped mega menu in the header section:

<rui-header-mega-menu iconType="view-list" text="Topics" data-col-width="225">

    <rui-mega-menu-item *ngFor="let topic of topicList" text="{{topic.name}}" route="{{topic.routerLink}}">
    </rui-mega-menu-item>

</rui-header-mega-menu>

Here’s an example of a simple, grouped mega menu in the nav section:

<rui-nav-mega-menu iconType="account" text="Account Types" data-col-width="190">

    <rui-mega-menu-group headerText="Checking Accounts">
        <rui-mega-menu-item text="Easy Checking" route="/#/EasyChecking"></rui-mega-menu-item>
        <rui-mega-menu-item text="Smart Checking" route="/#/SmartChecking"></rui-mega-menu-item>
    </rui-mega-menu-group>

    <rui-mega-menu-group headerText="Savings Accounts">
        <rui-mega-menu-item text="Standard Savings" route="/#/StandardSavings"></rui-mega-menu-item>
        <rui-mega-menu-item text="Holiday Saver" route="/#/HolidaySaver"></rui-mega-menu-item>
        <rui-mega-menu-item text="Youth Savings" route="/#/YouthSavings"></rui-mega-menu-item>
        <rui-mega-menu-item text="Senior Savings" route="/#/SeniorSavings"></rui-mega-menu-item>
    </rui-mega-menu-group>

</rui-nav-mega-menu>

Templated Mega Menus

Use rui-mega-menu-template if you need to display more than a single, short text description for each mega menu item. Specify a fixed width and height of each template item and a few simple elements to use in the template.

The rui-mega-menu-template component has a route property to specify the item’s route options if the template links to a view within this Angular app when clicked; otherwise handle the rui-mega-menu-option-click event. All text is specified within the template content so we don’t need a separate property for that.

The rui-nav-mega-menu and rui-header-mega-menu components have a data-col-width attribute that specifies the width of each templated item in the menu. The default value is 200 pixels. Content in the template is clipped if it’s wider than the specified column width, in order to preserve a strict grid layout. If any of your templated items are being clipped at the default column size, then specify a larger value for data-col-width.

The rui-nav-mega-menu and rui-header-mega-menu components also have a data-row-height attribute that specifies the height of each templated item in the menu. The default value is 100 pixels. Content in the template is clipped if it’s taller than the specified row height, in order to preserve a strict grid layout. If any of your templated items are being clipped at the default row height, then specify a larger value for data-row-height.

The rui-nav-mega-menu component displays as a fly-out menu at tablet and desktop sizes, but its elements display as part of the nav menu at mobile size. Mega menu templates do not have enough room to display well at mobile size, so you must specify a single text value to display at mobile size in addition to the more complex template displayed at larger screen sizes. To do this, first add a span to the template that has the rui-visible-mobile CSS class. This span should only display a short text value. Then add the rui-hidden-mobile CSS class to the outermost element that contains the more complex template you want to display at larger sizes. If you fail to provide a simple template for mobile size, the complex template will display embedded in the nav menu at mobile size, which almost always will result in a poor user experience.

You should only display simple text and optionally an icon in a mega menu template. Do NOT use other components, especially not anything interactive like buttons or any kind of layout component like a display block, etc. The template option is only for displaying a small amount of extra information when a single line of text isn’t enough.

Begin by importing the rui-mega-menu module into your application.

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-mega-menu/rui-mega-menu-imports';

Below is an example of a templated mega menu in the nav section. Note that it provides a simple template displayed within the nav menu at mobile size, as well as a more complex template displayed in the mega menu at tablet and desktop size.

<rui-nav-mega-menu iconType="palette" text="Theme" data-col-width="250" data-row-height="66">

    <rui-mega-menu-template *ngFor="let themeColor of themeColors"
        (rui-mega-menu-option-click)="changeThemeColor(themeColor.name)">

        <!-- Simple template displayed within nav menu at mobile size -->
        <span class="rui-visible-mobile">{{themeColor.name}}</span>

        <!-- Complex template displayed in mega menu at tablet and desktop size -->
        <div class="rui-hidden-mobile theme-container">
            <div><strong>{{themeColor.name}}</strong></div>
            <div>{{themeColor.description}}</div>
        </div>

    </rui-mega-menu-template>

</rui-nav-mega-menu>

Angular wrapper development

Use jha-header-mega-menu for header-based mega menus and jha-nav-mega-menu for nav-based mega menus.

The jha-nav-mega-menu and jha-header-mega-menu components have jhaIconType, jhaText, and jhaTooltip attributes to specify the button’s icon, text, and tooltip. Do not specify a click action for this button as its behavior is automatically defined: it toggles the display of its menu options when clicked. This element also has a jhaBadge attribute for displaying a short badge message next to the button text. By default, the text in header elements is capitalized. If in rare cases this text must retain mixed case, set the jhaAllowMixedCase property in jha-header-mega-menu to true, but this must be used sparingly in order to maintain consistency.

jha-nav-mega-menu displays as a fly-out menu at tablet and desktop sizes, but its elements display as part of the nav menu at mobile size.

Simple Mega Menus

If you only need simple text for each option, use jha-mega-menu-item elements in your mega menu. These display a small amount of non-wrapping text, without an icon. Mega menu items can be optionally grouped with a header, using jha-mega-menu-group elements.

Each simple mega menu contains zero or more jha-mega-menu-group elements and one or more jha-mega-menu-item elements.

There are two different use cases for simple mega menus:

• If the menu items lend themselves to grouping, then nest one or more jha-mega-menu-group elements within the mega menu, and add individual jha-mega-menu-items to each of those groups. This is often the case for static menus.
• If the sub-options are just a simple list of non-grouped items (which is often the case for a list of options returned from a service), then simply nest the jha-mega-menu-item elements directly within the mega menu without any intermediate jha-mega-menu-group elements.

If you’re grouping mega menu items within jha-mega-menu-group elements, the items in each group are always kept together; the groups flow within the menu to fit the available space. Otherwise if there are no groups, then the individual jha-mega-menu-item elements flow individually to fit the available space. Groups and items flow from top to bottom, left to right.

The jha-mega-menu-group component has jhaHeaderText, jhaRouterLink, jhaExternalUrl, and jhaExternalUrlInNewWindow attributes to specify the group’s header text and link options. jhaHeaderText can be blank if you don’t need a header for the group. In some cases your group headers will just be static text to identify the items in the group. In other cases, the header itself is clickable (in addition to the items in that group). If the group header is clickable, then specify one of the link options for the group header. Use jhaRouterLink if the header links to a view within this Angular app. Use jhaExternalUrl if the item links to a resource outside of this app. jhaExternalUrlInNewWindow specifies whether the link opens in a new window.

The jha-mega-menu-item component has jhaText, jhaRouterLink, jhaExternalUrl, and jhaExternalUrlInNewWindow attributes to specify the item’s text and link options. Use jhaRouterLink if the item links to a view within this Angular app. Use jhaExternalUrl if the item links to a resource outside of this app. jhaExternalUrlInNewWindow specifies whether the link opens in a new window.

Mega menu items are always considered to be clickable, so they always display a hover effect. Mega menu group headers, however, may or may not be clickable, depending on your needs. If you specify a jhaRouterLink or external URL for the group header, it will automatically display a hover effect indicating its clickability. But if you instead wire up a click event handler, you’ll need to set the jha-mega-menu-group component’s jhaIsClickable boolean property to true in order to see a hover effect for that group.

jha-nav-mega-menu and jha-header-mega-menu also have a jhaColumnWidth attribute that specifies the width of each individual column in the menu. The default value is 200 pixels. Group headers and items are clipped if they are wider than the specified column width. Items do not wrap in order to preserve a strict grid layout. If any of your menu items are being clipped at the default column size, then specify a larger value for jhaColumnWidth.

Begin by importing the JhaMegaMenuModule into your application.

// import into app.module
import { JhaMegaMenuModule } from '@jkhy/responsive-ui-angular/jha-mega-menu';

@NgModule({
    imports: [
        ...
        JhaMegaMenuModule,
        ...
    ]
})

export class AppModule(){}

Here’s an example of a simple, non-grouped mega menu in the header section:

<jha-header-mega-menu jhaIconType="Information" jhaText="Topics" jhaColumnWidth="225">

    <jha-mega-menu-item *ngFor="let topic of topicList"
        jhaText="{{topic}}" [routerLink]="['/Topic', topic]">
    </jha-mega-menu-item>

</jha-header-mega-menu>

Here’s an example of a simple, grouped mega menu in the nav section:

<jha-nav-mega-menu jhaIconType="Account" jhaText="Account Types" jhaColumnWidth="190">

    <jha-mega-menu-group jhaHeaderText="Checking Accounts">
        <jha-mega-menu-item jhaText="Easy Checking" jhaRouterLink="/EasyChecking">
        </jha-mega-menu-item>
        <jha-mega-menu-item jhaText="Smart Checking" jhaRouterLink="/SmartChecking">
        </jha-mega-menu-item>
    </jha-mega-menu-group>

    <jha-mega-menu-group jhaHeaderText="Savings Accounts">
        <jha-mega-menu-item jhaText="Standard Savings" jhaRouterLink="/StandardSavings">
        </jha-mega-menu-item>
        <jha-mega-menu-item jhaText="Holiday Saver" jhaRouterLink="/HolidaySaver">
        </jha-mega-menu-item>
        <jha-mega-menu-item jhaText="Youth Savings" jhaExternalUrl="http://www.google.com">
        </jha-mega-menu-item>
        <jha-mega-menu-item jhaText="Senior Savings" jhaExternalUrl="http://www.yahoo.com"
            jhaExternalUrlInNewWindow="false">
        </jha-mega-menu-item>
    </jha-mega-menu-group>

</jha-nav-mega-menu>

Templated Mega Menus

If you need to display more than a single, short text description for each option, use jha-mega-menu-template elements. Specify the fixed width and height of each template item and a few simple elements to use in the template.

The jha-mega-menu-template component has jhaRouterLink, jhaExternalUrl, and jhaExternalUrlInNewWindow attributes to specify the item’s link options. (All text is specified within the template content.) Use jhaRouterLink if the item links to a view within this Angular app. Use jhaExternalUrl if the item links to a resource outside of this app. jhaExternalUrlInNewWindow specifies whether the link opens in a new window.

jha-nav-mega-menu and jha-header-mega-menu have a jhaColumnWidth attribute that specifies the width of each templated item in the menu. The default value is 200 pixels. Content in the template is clipped if it’s wider than the specified column width, in order to preserve a strict grid layout. If any of your templated items are being clipped at the default column size, then specify a larger value for jhaColumnWidth.

jha-nav-mega-menu and jha-header-mega-menu also have a jhaRowHeight attribute that specifies the height of each templated item in the menu. The default value is 100 pixels. Content in the template is clipped if it’s taller than the specified row height, in order to preserve a strict grid layout. If any of your templated items are being clipped at the default row height, then specify a larger value for jhaRowHeight.

jha-nav-mega-menu displays as a fly-out menu at tablet and desktop sizes, but its elements display as part of the nav menu at mobile size. Mega menu templates do not have enough room to display well at mobile size, so you must specify a single text value to display at mobile size in addition to the more complex template displayed at larger screen sizes. To do this, first add a span to the template that has the jha-visible-phone CSS class. This span should only display a short text value. Then add the jha-hidden-phone CSS class to the outermost element that contains the more complex template you want to display at larger sizes. If you fail to provide a simple template for mobile size, the complex template will display embedded in the nav menu at mobile size, which almost always will result in a poor user experience.

Begin by importing the JhaMegaMenuModule into your application.

// import into app.module
import { JhaMegaMenuModule } from '@jkhy/responsive-ui-angular/jha-mega-menu';

@NgModule({
    imports: [
        ...
        JhaMegaMenuModule,
        ...
    ]
})

export class AppModule(){}

Below is an example of a templated mega menu in the nav section. Note that it provides a simple template displayed within the nav menu at mobile size, as well as a more complex template displayed in the mega menu at tablet and desktop size.

<jha-nav-mega-menu jhaIconType="Palette" jhaText="Theme" jhaColumnWidth="250"
  jhaRowHeight="66">

    <jha-mega-menu-template *ngFor="let themeColor of themeColors; let i=index"
        (click)="changeThemeColor(i)">

        <!-- Simple template displayed within nav menu at mobile size -->
        <span class="jha-visible-phone">{{themeColor.name}}</span>

        <!-- Complex template displayed in mega menu at tablet and desktop size -->
        <div class="jha-hidden-phone theme-container">
            <div><strong>{{themeColor.name}}</strong></div>
            <div>{{themeColor.description}}</div>
        </div>

    </jha-mega-menu-template>

</jha-nav-mega-menu>

Mega Menu Service

The JhaMegaMenuService is responsible for resizing and detaching the mega menu. This happens automatically when you set up a jha-nav-mega-menu or jha-header-mega-menu.

However, sometimes a scenario will arise where you need to recalculate the layout of the mega menu due to items getting added after the initialization of the mega menu.

To recalculate or detach the mega menu, import the JhaMegaMenuService service and call the resizeMegaMenu() and detachMegaMenu() methods respectively. Below is an example of how to accomplish this:

import { JhaMegaMenuService } from '@jkhy/responsive-ui-angular/jha-responsive-core';

@Component({
    selector: 'app-component',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {

    constructor(private megaMenuService: JhaMegaMenuService) {}

    public resizeMenu(): void {
        this.megaMenuService.resizeMegaMenu();
    }

    public detachMenu(): void {
        this.megaMenuService.detachMegaMenu();
    }

}

Design

Figma design

Use a header mega menu button for header-based mega menus and a nav-based mega menu button for nav-based mega menus.

Adobe XD design

Use a header mega menu button for header-based mega menus and a nav-based mega menu button for nav-based mega menus.