Caution: The Jack Henry design system is currently in an alpha state. Designs, code, and documentation may change at any time without warning. The system is presented for testing purposes only.

Menu

A menu is a self-contained list of actionable choices.

Status: In progress

Anatomy

  1. Container
  2. Menu group
  3. Divider
  4. Right icon
  5. Left icon
  6. Item label
  7. Menu item
  8. Subheader

Variants

Menus are essentially containers for menu items. By default, they include a basic menu item layout that can be configured for many common menu-based tasks. Custom layouts can be created and inserted to override the default preset.

Type

The default menu includes a fairly flexible menu item that allows for the following icon and label combinations:

  • Text only
  • Left icon
  • Right icon
  • Both icons

Menu item types can be mixed and matched as needed.

Text only (Default)
Left icon
Right icon
Both icons

Size

Menu items can be one of two sizes to appropriately take advantage of space available to the menu and what’s required of the menu content.

Medium (Default)

Use medium menu items for context-specific menus such as card and dropdown menus.

Large

Use large menu items for major menu systems within the UI such as navigation menus or for menus that have larger nested components or two rows of text.

Divider

A divider can be used between menu items to create visual separation or to help group similar options. The divider is made up of the divider component, thus allowing a user to set insets that can align to content within the item. The divider is not part of the menu item itself, but rather can be manually inserted as needed.

Behavior

Width

A menu will typically grow to accommodate the content within the menu. However, the menu component has a minimum width (see min-width property in structure section) to prevent collapsing down to an unrealistic width. This would be most noticeable for menus with items such as two-letter state abbreviations.

Grouping

Related menu items can be grouped together to provide greater context, break up longer lists of items, and enhance scannability. Grouped items are preceded by a required non-interactive subheader. Single menu items and menu groups may be intermixed at the same level.

Keyboard interactions

Standard keyboard interactions apply for elements within a menu.

  • Tab: Tabbing through a menu stops and focuses on any interactive elements present. Continued tabbing will cycle back through the elements within the menu, not move focus to the next interactive element beyond the menu in the DOM.
  • Return/Enter: Pressing the return key activates whichever interactive element is in focus.
  • Escape: Pressing the escape key closes the menu (if it is part of an overflow or other triggered menu aside from form dropdowns).
  • Arrow keys: Arrow keys have no effect on navigation within the menu apart from browser-based defaults.

States

When hovered over a menu item, the cursor should change to a pointer.

Enabled
Focus
Hover
Active
Selected
Disabled