Developer Programs

Learn

Docs

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
rui-mega-menu-item
Module: rui-mega-menu - Package: @jkhy/responsive-ui-wc

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

NameTypeDefaultDescription
textstring''Text displayed for the mega menu item
routestring''

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-clickeventFired when the user clicks the mega menu item.

Implementation

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


Angular wrapper development

Wrapper reference

jha-mega-menu-item
jha-mega-menu-item
Module: JhaMegaMenuModule - Package: @jkhy/responsive-ui-angular

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

NameTypeDefaultDescription
jhaTextstring''Text displayed for the mega menu item
jhaRouterLinkstring''If the item routes to an Angular route when clicked, this is the Angular route to activate.
jhaExternalUrlstring''If the item links to a URL outside of the app, assign that URL to this attribute.
jhaExternalUrlInNewWindowbooleantrueIf 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.
jhaTooltipstring''Tooltip to display when the mouse hovers over the element

Implementation

See the Mega Menu Angular wrapper 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 ComponentDesign Component Name
Header mega menuRUI / Header / Mega Menu
Nav mega menuRUI / Nav / Mega Menu
Mega menu itemAdd 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 ComponentDesign Component Name
Header mega menuJHA / Header / Mega Menu
Nav mega menuJHA / Nav / Mega Menu
Mega menu itemJHA / 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 Mon May 1 2023