Mega Menu Group
Overview
Use this component to group related items in a mega menu.
The group can optionally display a header above its items. The header can be clickable if needed, but it’s often only used to label the group.
When you group mega menu items, the items in each group are always kept together; the groups flow within the menu to fit the available space.
Development
Web component development
Component reference
rui-mega-menu-group
A group of related items that stay together in a simple mega menu, optionally displaying a header. Contains one or more rui-mega-menu-item elements.
| Name | Type | Default | Description |
|---|---|---|---|
| headerText | string | '' | Optional header text that displays above the group |
| isClickable | boolean | false | Set this to true if the group header is clickable itself. If the group header is not clickable (the mega menu items themselves are always clickable), leave this at its default of false. |
| route | string | '' |
If the group header is clickable and 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 group header. |
Implementation
See the Mega Menu Web component development section for more implementation details.
Angular component development
Component reference
jha-mega-menu-group
A group of related items that stay together in a simple mega menu, optionally displaying a header. Contains one or more jha-mega-menu-item elements.
| Name | Type | Default | Description |
|---|---|---|---|
| jhaHeaderText | string | '' | Optional header text that displays above the group |
| jhaIsClickable | boolean | false | Set this to true if the group header is clickable itself. If the group header is not clickable (note that the mega menu items themselves are always clickable), leave this at its default of false. |
| jhaRouterLink | string | '' | If the group header is clickable and routes to an Angular route when clicked, this is the Angular route to activate. |
| jhaExternalUrl | string | '' | If the group header is clickable and links to a URL outside of the app, assign that URL to this attribute. |
| jhaExternalUrlInNewWindow | boolean | true | If the group header is clickable and 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 header | Add text, then apply rui/semibold as the Text Style and rui-pacific/main-header-fg as the Color Style |
| 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 header | JHA / Text / Mega Menu Header |
| Mega menu item | JHA / Text / Mega Menu Item |