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.
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 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.
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 wrapper development section for more implementation details.
Design
Figma design
Figma design info
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
- 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
Last updated Mon May 1 2023