(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Overflow menu

The Dynamic Overflow Menu Component is a versatile UI element that provides a compact dropdown menu, typically represented by an icon button. When clicked, it displays a list of selectable options. This component is ideal for implementing contextual actions, secondary features, or additional options without cluttering the interface. The overflow menu can be configured with different icons, placement options, and menu items to suit various application needs.

Properties

Visual Properties

  • iconName - Sets the icon displayed for the overflow menu button. For example, setting this to "more-outline" creates a three-dot menu icon, while "settings-outline" creates a gear icon that suggests configuration options.

  • placement - Determines where the dropdown menu appears relative to the button. Options include "top", "right", "bottom", and "left". For example, setting this to "bottom" makes the menu appear below the button, which is useful when the component is placed near the top of the screen.

  • options - Defines the menu items that appear when the overflow menu is opened. Each option can have properties such as:

  • text: The label shown for the menu item

  • showMenuLinkIcon: Whether to display an icon next to the menu item text

  • iconPositionKey: Where to place the icon ("menuLinkLeftIconName" or "menuLinkRightIconName")

  • menuLinkLeftIconName/menuLinkRightIconName: The specific icon to display

  • paddingClass - Configures the padding around the component using CSS classes. For example, "p-2" adds medium padding on all sides of the overflow menu button.

Event Actions

  • events - Configures events that the component can trigger and respond to:
  • ON_INIT: Triggered when the component is initialized. This event can be used for initial setup or configuration.
  • ON_DESTROY: Triggered when the component is removed from the DOM. This event can be used for cleanup operations.
  • ONOPTIONCLICK: Triggered when a specific menu option is clicked. This event can be configured for each individual menu option to perform different actions.

General

  • displayName - Sets the display name of the component shown in the structure panel. For example, "Action Menu" clearly identifies the purpose of this overflow menu in the component structure.

Authorization

  • visibilityPolicySetId - Determines the visibility of the component based on user permissions and policy sets. For example, setting to "adminOnlyPolicy" restricts the overflow menu to users with admin privileges.

Visibility

  • displayConditions - Defines conditions under which the overflow menu is displayed. This allows for context-aware visibility, showing the menu only when certain conditions are met.

Testing Hooks

  • id - Specifies a unique identifier for the component, useful for programmatic access in testing or custom code.

  • dataTestId - Sets a testing hook ID for automated testing, allowing test scripts to reliably identify this overflow menu component.

  • enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, this overflow menu can be highlighted during onboarding tours.

  • guidedTourHotSpotTitle - Sets the title text displayed when this component is highlighted in a guided tour, with support for translations.

  • guidedTourHotSpotDescription - Sets the descriptive text explaining the overflow menu's purpose during a guided tour, with support for translations.

Menu Option Configuration

The overflow menu options can be extensively configured:

[
  {
    "text": "Edit Item",
    "type": "menu-link",
    "showMenuLinkIcon": true,
    "iconPositionKey": "menuLinkLeftIconName",
    "menuLinkLeftIconName": "edit-outline",
    "events": [
      {
        "type": "ON_OPTION_CLICK",
        "actions": [
          {
            "type": "NAVIGATE_TO_URL",
            "configuration": {
              "url": "/edit/{id}"
            }
          }
        ]
      }
    ]
  },
  {
    "text": "Delete Item",
    "type": "menu-link",
    "showMenuLinkIcon": true,
    "iconPositionKey": "menuLinkLeftIconName",
    "menuLinkLeftIconName": "delete-outline",
    "events": [
      {
        "type": "ON_OPTION_CLICK",
        "actions": [
          {
            "type": "SHOW_CONFIRMATION_DIALOG",
            "configuration": {
              "title": "Confirm Deletion",
              "message": "Are you sure you want to delete this item?"
            }
          }
        ]
      }
    ]
  }
]

Common Use Cases

The Dynamic Overflow Menu component is commonly used for:

  1. Row actions in tables - Providing actions like Edit, Delete, Archive for individual table rows
  2. Page-level actions - Housing secondary actions that don't warrant primary button placement
  3. Settings menus - Offering configuration options in a compact dropdown
  4. Export options - Providing various export formats like PDF, Excel, CSV

Design Considerations

When implementing the overflow menu component:

  • Use consistent iconography that clearly communicates the menu's purpose
  • Order menu items by frequency of use or logical grouping
  • Consider adding dividers between logical groups of options
  • Keep the number of options reasonable (generally fewer than 7-8 items)
  • Use clear, concise labels for each option
  • Add icons to options when they help with quick visual recognition

This component helps maintain a clean, uncluttered interface while still providing access to important functionality when needed.

  • No labels