Mega Menu Template
Overview
Use this component to display a template for individual items in a mega menu.
Simple mega menu items only display a small piece of text for each item.
If you need to display more than that — for example, say you need to display an icon, a title, and detail for each item — use a mega menu template, nesting the elements for each template within the template element itself.
Development
Web component development
Component reference
rui-mega-menu-template
Displays a templated mega menu item
| Name | Type | Default | Description |
|---|---|---|---|
| route | string | '' |
If the template 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 template. |
Implementation
See the Mega Menu Web component development section for more implementation details.
Angular component development
Component reference
jha-mega-menu-template
Displays a templated mega menu item
| Name | Type | Default | Description |
|---|---|---|---|
| jhaRouterLink | string | '' | If the template routes to an Angular route when clicked, this is the Angular route to activate. |
| jhaExternalUrl | string | '' | If the template links to a URL outside of the app, assign that URL to this attribute. |
| jhaExternalUrlInNewWindow | boolean | true | If the template links to a URL outside of the app, set this to true if that link should open 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
| 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
- 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 |