Header Mega Menu Button

Components > Application Layout > Header Mega Menu Button

Use this component to...

Present a button in the right side of your application header that toggles a large mega menu when pressed

Overview

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

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

Only add header mega menu buttons to the right side of the header.

Development

Web component development

Component reference

rui-header-mega-menu

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

Header 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.
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.
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.
isDisabled	boolean	false	Specifies whether the mega menu button is disabled.
allowMixedCase	boolean	false	Our standard is for header buttons to uppercase their text. In certain rare cases, this uppercasing can be inappropriate. For example, the button text may refer to a product name that must include a lower case character for trademark purposes. In these rare cases, set this property to true to preserve mixed case for the button.

Implementation

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

Import the module

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

Use a rui-header-mega-menu for a button that displays a mega menu of options when pressed.

Use rui-header-mega-menu instead of rui-header-dropdown if you have more than a few menu options to display.

The example below adds a mega menu button to the right side of the header that displays a mega menu with the US states as options.

Using the component

<!-- Header: Defines application name and admin options that display in header -->
<rui-header [displaySearch]="true" searchWidth="50%" searchWatermarkText="SEARCH" (rui-header-search)="search($event)">

    <!-- Left side -->
    <rui-header-left [displayBackButton]="displayBackButton" (rui-back-button-click)="backButtonClicked()">

        <!-- Left side content -->

    </rui-header-left>

    <!-- Right side -->
    <rui-header-right>

        <rui-header-mega-menu iconType="map-location" text="Locations">
            <rui-mega-menu-item *ngFor="let state of stateList" text="{{state}}">
            </rui-mega-menu-item>
        </rui-header-mega-menu>

    </rui-header-right>

</rui-header>

Angular wrapper development

Wrapper reference

jha-header-mega-menu

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

Header 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.
jhaTooltip	string	''	Tooltip to display when the mouse hovers over the button
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.
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.
jhaIsDisabled	boolean	false	Specifies whether the mega menu button is disabled.
jhaAllowMixedCase	boolean	false	Our standard is for header buttons to uppercase their text. In certain rare cases, this uppercasing can be inappropriate. For example, the button text may refer to a product name that must include a lower case character for trademark purposes. In these rare cases, set this property to true to preserve mixed case for the button.

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(){}

Use a jha-header-mega-menu for a header button that displays a mega menu of options when pressed.

Use jha-header-mega-menu instead of jha-header-dropdown if you have more than a few menu options to display.

The example below adds a mega menu button to the right side of the header that displays a mega menu with the US states as options.

Using the component

<!-- Header: Defines application name and admin options that display in header -->
<jha-header [jhaIsHidden]="hideHeader" jhaDisplaySearch="true" jhaSearchWidth="50%"
    jhaSearchWatermarkText="SEARCH" (jhaSearch)="search($event)">

    <!-- Left side -->
    <jha-header-left>

        <!-- Left side content -->

    </jha-header-left>

    <!-- Right side -->
    <jha-header-right>

        <jha-header-mega-menu class="jha-hidden-phone" jhaIconType="Information" jhaText="Mega Menu" jhaColumnWidth="200">
            <jha-mega-menu-item *ngFor="let state of stateList"
                jhaText="{{state}}" jhaRouterLink="/Home">
            </jha-mega-menu-item>
        </jha-header-mega-menu>

    </jha-header-right>

</jha-header>

Component playground

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
Header mega menu button	RUI / Header / Mega Menu Button Available values for the State property: Inactive Active Menu Displayed
Header button badge	RUI / Header / Button Badge

Dev Component

Design Component Name

Header mega menu button

RUI / Header / Mega Menu Button

Available values for the State property:

Inactive
Active
Menu Displayed

Header button badge

RUI / Header / 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
Header mega menu button - inactive	JHA / Header / Mega Menu Button / Inactive
Header mega menu button - active	JHA / Header / 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 Wed Sep 25 2024