Nav Mega Menu Button

Components > Application Layout > Nav Mega Menu Button

Use this component to...

Present a button in your nav bar that toggles a large mega menu when pressed

Overview

Use this component to add a button to your nav bar that toggles the display of a mega menu when pressed.

The nav mega menu is anchored to the nav bar. It spans the full height of the screen, but only takes as much width as it needs.

Development

Web component development

Component reference

rui-nav-mega-menu

Module: rui-nav - Package: @jkhy/responsive-ui-wc

Nav button that displays a mega menu when pressed

Name	Type	Default	Description
text	string	''	Text displayed in the button
iconType	string	''	The name of the icon to display in the button. You can find a list of all enterprise icons here. The use of custom icons is also supported. Leave the iconType blank if you want to display initials based on the button text instead of an icon. For example, if the button text is “Additional Overrides” and no icon is specified, the button would display “AO” instead of an icon.
iconInitials	string	''	If you left iconType blank so that the button displays initials for the icon, you can use this property to override the initials displayed if you need to. You would typically only do this if the calculated initials were non-unique or unsuitable for any reason.
badge	string	''	Optional text that is highlighted to the right of the button text. Often used to display a count of data items that can be accessed when the user presses the button.
isDisabled	boolean	false	Specifies whether the mega menu button is disabled.
data-col-width	number	200	Data attribute specifying the width in pixels of each column in the mega menu. Leave this at the default value unless items are being clipped.
data-row-height	number	35	Data attribute specifying the height in pixels of each row in the mega menu. You should only set this if your mega menu uses templates, in which case this defines the height of each template.

Implementation

Begin by importing the rui-nav module into your application.

Import the module

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

The example below adds two mega menus to the nav bar:

The first mega menu is data-driven and displays a simple mega menu item for each topic in the list.
The second mega menu is static and breaks related navigation options into groups

Using the component

<rui-nav>

   <!-- Data-driven mega menu (no groups) -->
    <rui-nav-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-nav-mega-menu>

    <!-- Static mega menu, with groups -->
    <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>

</rui-nav>

Angular wrapper development

Wrapper reference

jha-nav-mega-menu

Module: JhaMegaMenuModule - Package: @jkhy/responsive-ui-angular

Nav button that displays a mega menu when pressed

Name	Type	Default	Description
jhaText	string	''	Text displayed in the button
jhaIconType	string	''	The name of the icon to display in the button. You can find a list of all enterprise icons here. The use of custom icons is also supported. Leave the jhaIconType blank if you want to display initials based on the button text instead of an icon. For example, if the button text is “Additional Overrides” and no icon is specified, the button would display “AO” instead of an icon.
jhaIconInitials	string	''	If you left iconType blank so that the button displays initials for the icon, you can use this property to override the initials displayed if you need to. You would typically only do this if the calculated initials were non-unique or unsuitable for any reason.
jhaBadge	string	''	Optional text that is highlighted to the right of the button text. Often used to display a count of data items that can be accessed when the user presses the button.
jhaTooltip	string	''	Tooltip to display when the mouse hovers over the button
jhaIsDisabled	boolean	false	Specifies whether the mega menu button is disabled.
jhaColumnWidth	number	-1	The width in pixels of each column in the mega menu. Leave this at the default value unless items are being clipped.
jhaRowHeight	number	-1	The height in pixels of each row in the mega menu. You should only set this if your mega menu uses templates, in which case this defines the height of each template.

Implementation

Begin by importing the JhaMegaMenuModule module into your application.

Import the module

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

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

export class AppModule(){}

The example below adds two mega menus to the nav bar:

The first mega menu is data-driven and displays a simple mega menu item for each topic in the list.
The second mega menu is static and breaks related navigation options into groups

Using the component

<jha-nav>

    <!-- Data-driven mega menu (no groups) -->
    <jha-nav-mega-menu jhaIconType="Information" jhaText="Topics" jhaColumnWidth="225">

        <jha-mega-menu-item *ngFor="let topic of topicList"
            jhaText="{{topic.name}}" jhaRouterLink="{{topic.routerLink}}">
        </jha-mega-menu-item>

    </jha-nav-mega-menu>

    <!-- Static mega menu, with groups -->
    <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>

</jha-nav>

Design

Figma design

Figma design info

You can find this component in the Components - Application Layout page in the Figma UI Kit.

Dev Component	Design Component Name
Nav mega menu button	RUI / Nav / Mega Menu Button Available values for the State property: Inactive Active Menu Displayed Turn on the Collapsed property for a collapsed nav bar; leave it off for an expanded nav bar
Nav button badge	RUI / Nav / Button Badge

Dev Component

Design Component Name

Nav mega menu button

RUI / Nav / Mega Menu Button

Available values for the State property:

Inactive
Active
Menu Displayed

Turn on the Collapsed property for a collapsed nav bar; leave it off for an expanded nav bar

Nav button badge

RUI / Nav / Button Badge

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Layout - Header, Expanded Nav, Function View
Layout - Header, Collapsed Nav, Function View
Layout - Nav Elements - Expanded Nav Bar
Layout - Nav Elements - Collapsed Nav Bar
Layout - Nav Mega Menu
Layout - Header Elements – Basics
Layout - Header Menu Buttons
Layout - Header Mega Menu
Layout - Mobile Application
Layout - Tablet Application – Portrait
Layout - Tablet Application - Landscape

Dev Component	Design Component Name
Nav mega menu button - expanded, inactive	JHA / Nav / Expanded / Mega Menu Button / Inactive
Nav mega menu button - expanded, active	JHA / Nav / Expanded / Mega Menu Button / Active
Nav mega menu button - collapsed, inactive	JHA / Nav / Collapsed / Mega Menu Button / Inactive
Nav mega menu button - collapsed, active	JHA / Nav / Collapsed / Mega Menu Button / Active

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Mon Oct 30 2023