Mega Menu Item

Components > Application Layout > Mega Menu Item

Use this component to...

Display an individual item in a mega menu

Overview

Use this component to display an individual menu item in a mega menu.

Development

Web component development

Component reference

rui-mega-menu-item

Module: rui-mega-menu - Package: @jha/rui-wc

Individual item in a simple mega menu. Optionally grouped within a rui-mega-menu-group element.

Name	Type	Default	Description
text	string	''	Text displayed for the mega menu item
route	string	''	If the item links to a view within the app, assign the route for that view to this attribute. You must prefix the route with “/#” in Angular applications.
rui-mega-menu-option-click	event		Fired when the user clicks the mega menu item.

Name

Type

Default

Description

text

string

Text displayed for the mega menu item

route

string

If the item links to a view within the app, assign the route for that view to this attribute.

You must prefix the route with “/#” in Angular applications.

rui-mega-menu-option-click

event

Fired when the user clicks the mega menu item.

Implementation

See the Mega Menu Web component development section for more implementation details.

Angular component development

Component reference

jha-mega-menu-item

Module: JhaMegaMenuModule - Package: @jha/jharesponsive

Individual item in a simple mega menu. Optionally grouped within a jha-mega-menu-group element.

Name	Type	Default	Description
jhaText	string	''	Text displayed for the mega menu item
jhaRouterLink	string	''	If the item routes to an Angular route when clicked, this is the Angular route to activate.
jhaExternalUrl	string	''	If the item links to a URL outside of the app, assign that URL to this attribute.
jhaExternalUrlInNewWindow	boolean	true	If the item links to a URL outside of the app, set this to true if that link should be opened in a new tab/window, otherwise bind this to false.
jhaTooltip	string	''	Tooltip to display when the mouse hovers over the element

Implementation

See the Mega Menu Angular component development section for more implementation details.

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	RUI / Header / Mega Menu
Nav mega menu	RUI / Nav / Mega Menu
Mega menu item	Add text, then apply rui/regular as the Text Style and rui-pacific/main-header-fg as the Color Style

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	JHA / Header / Mega Menu
Nav mega menu	JHA / Nav / Mega Menu
Mega menu item	JHA / Text / Mega Menu Item

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 Tue Feb 7 2023