Developer Programs
Vendor Integration Program (VIP)
Direct access to Jack Henry's technical integration resources.
Technical Account Manager (TAM)
Get technical integration help from a single point of contact.
Developer Account
Create a developer acccount to access resources that help you integrate with Jack Henry.
Learn
Shared Responsibility
Learn about shared roles and responsibilities of customers and Jack Henry in open banking.
Developer Use Cases
Find a use case that fits your development needs.
Developer Video Gallery
Watch the latest demos, webinars, and more.
Developer Conference
Connect with industry leaders, gain insights from expert speakers, and explore our latest innovations.
Docs
Admin API
Create solutions for an institution's back office support tools.
Authentication Framework
Map customer identities to your existing system IDs.
Consumer API
Access financial data for user accounts, transactions, and more.
Data Broker
Get deeper access to financial institution data.
Enterprise Event System
Respond to events in real-time using this powerful pub/sub-based solution.
jXchange - REST API
Translate business information between Jack Henry and third-party applications using a REST-based API.
jXchange - SOAP API
Translate business information between Jack Henry and third-party applications using a SOAP-based API.
Operational Data Integration (ODI)
Get customized queries for bulk data needs.
Payments
Embed check deposits, ACH, bill pay, cards, and real-time payments.
Plugin Framework
Embed the best of the fintech world directly into your user's dashboard.
SymXchange
Query Symitar core member accounts, post transactions, run PowerOn scripts, and more.
Xperience
Modern UI that provides consistent visual integration across Jack Henry products.

Mega Menu Group

Components > Application Layout > Mega Menu Group
Use this component to...
Group related mega menu items

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

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.

NameTypeDefaultDescription
headerTextstring''Optional header text that displays above the group
isClickablebooleanfalseSet this to true if the group header is not a route change or external URL, but still needs to trigger a clickable event. If the group header is not clickable (the mega menu items themselves are always clickable), leave this at its default of false.
routestring''

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

Implementation

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

Angular wrapper development

Wrapper reference

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

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.

NameTypeDefaultDescription
jhaHeaderTextstring''Optional header text that displays above the group
jhaIsClickablebooleanfalseSet this to true if the group header is not a route change or external URL, but still needs to trigger a clickable event. If the group header is not clickable (note that the mega menu items themselves are always clickable), leave this at its default of false.
jhaRouterLinkstring''If the group header is clickable and routes to an Angular route when clicked, this is the Angular route to activate.
jhaExternalUrlstring''If the group header is clickable and links to a URL outside of the app, assign that URL to this attribute.
jhaExternalUrlInNewWindowbooleantrueIf 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.
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 headerAdd text, then apply rui/semibold as the Text Style and rui-pacific/main-header-fg as the Color Style
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 headerJHA / Text / Mega Menu Header
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 Fri Jul 21 2023