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

Overflow Menu

Overview

The Dynamic Overflow Menu Component is a dropdown menu usually shown as an icon button.
When activated, it displays a list of selectable options.
It is useful for contextual actions, secondary features, or extra options without cluttering the interface.
The component can be customized with icons, placement options, and menu items.
It helps keep interfaces clean while still providing access to important functionality.

Example Overflow Menu

Specs

Tokens

Token	Description
iconName	Icon shown for the menu button
placement	Position of the dropdown relative to the button
options	List of menu items displayed in the dropdown
text	Label for a menu item
showMenuLinkIcon	Whether to show an icon with a menu item
iconPositionKey	Where to place the item icon (left or right)
menuLinkLeftIconName	Icon shown on the left of a menu item
menuLinkRightIconName	Icon shown on the right of a menu item
paddingClass	CSS classes that define padding
displayName	Display name in the structure panel
events	Configurable events for the component
ON_INIT (Events)	Event fired when the component is initialized
ON_DESTROY (Events)	Event fired when the component is removed
ON_OPTION_CLICK (Events)	Event fired when a menu option is clicked
visibilityPolicySetId	Controls visibility based on policy sets
displayConditions	Conditions for when the menu is shown
id	Unique identifier for the component
dataTestId	Identifier for automated tests
enableAsHotspot	Enables the component as a guided tour hotspot
guidedTourHotSpotTitle	Title for guided tour highlight
guidedTourHotSpotDescription	Description for guided tour highlight

Structure

(Configured in General Properties)

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.

(Configured in 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.

(Configured in Visual Properties)

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

Variants of the layout

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?"
            }
          }
        ]
      }
    ]
  }
]

Styling

(Configured in 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.

Icon selection

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.

Placement menu

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.

Actions & Variants

(Configured in Events)

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.
ON_OPTION_CLICK – Triggered when a specific menu option is clicked. This event can be configured for each individual menu option to perform different actions.

Tests

(Configured in 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.

Authorization

(Configured in 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.

Links

Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11600-88110&t=ftfrOGkPzlG2GaTo-1
Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id4/2-overflow-menu

Guidelines

Usage

Use the component to reveal contextual or secondary actions by configuring the trigger icon with iconName and the list of items with options.
Place the dropdown where it will not obscure the trigger or key content by setting placement to "bottom", "top", "right", or "left" according to available space.
Keep actions concise and scannable by writing clear labels in options[].text and, when recognition helps, enabling options[].showMenuLinkIcon to pair labels with icons.
Keep menus lightweight by constraining the length of the options array to a manageable number (for example, around eight) so choices remain easy to scan.
Use side-specific icons consistently by setting options[].iconPositionKey to "menuLinkLeftIconName" or "menuLinkRightIconName", and assigning options[].menuLinkLeftIconName or options[].menuLinkRightIconName accordingly.

Sizing & Layout

Adjust the trigger’s tap/click comfort and breathing room using paddingClass (for example, "p-1", "p-2", "p-3") to align visually with nearby controls.
Keep item alignment steady by choosing a single options[].iconPositionKey value so labels in options[].text line up across the list.
Prevent clipping and reduce pointer travel by choosing an appropriate placement relative to the trigger using the "top", "right", "bottom", or "left" values.

States & Feedback

Perform cleanup on teardown with ON_DESTROY (declared in events) when initialization attached resources that need removal.
Provide immediate feedback on selection by wiring per-item handlers in options[].events so ON_OPTION_CLICK triggers the intended action flow.

Interactions & Events

Navigate or execute tasks by attaching actions to options[].events for the ON_OPTION_CLICK type; ensure the intent is reflected by clear options[].text.
Gate destructive actions behind confirmation by routing ON_OPTION_CLICK in options[].events through a confirmation step before execution.
Enable onboarding assistance by turning on enableAsHotspot and providing guidedTourHotSpotTitle and guidedTourHotSpotDescription so the trigger can be highlighted in a guided tour.

Data-Driven / Conditional Behavior

Show only relevant actions for the current context by passing a context-appropriate options array to the component.
Convey action semantics with icons by enabling options[].showMenuLinkIcon and setting options[].menuLinkLeftIconName or options[].menuLinkRightIconName consistently with options[].iconPositionKey.

Visibility & Authorization

Show or hide the trigger based on context by defining displayConditions that resolve to true only when actions are applicable.
Restrict access by setting visibilityPolicySetId so the overflow menu appears only for users in the permitted policy set.

Dos & Don’ts

Do	Don’t	Article setting(s)
Use `placement="bottom"` when the trigger is near the top edge so the menu opens into available space.	Use `placement="top"` in the same case, causing the menu to clip against the top edge.	`placement`
Keep labels short and action-oriented by writing `options[].text` like “Edit item.”	Use vague `options[].text` such as “Done,” which obscures intent.	`options[].text`
Pair icons with labels by enabling `options[].showMenuLinkIcon` and setting `options[].menuLinkLeftIconName`.	Rely on icons without `options[].text`, reducing clarity.	`options[].showMenuLinkIcon`, `options[].menuLinkLeftIconName`
Confirm risky actions by routing `ON_OPTION_CLICK` through a confirmation step in `options[].events`.	Execute destructive actions immediately on `ON_OPTION_CLICK` without confirmation.	`options[].events`, `ON_OPTION_CLICK`
Keep the menu scannable by limiting the `options` array to a manageable size.	Overload `options` with long lists that slow scanning and selection.	`options`
Use `paddingClass` to ensure the trigger has a comfortable hit area next to other controls.	Leave `paddingClass` unset so the trigger feels cramped or hard to tap.	`paddingClass`
Place item icons consistently with `options[].iconPositionKey="menuLinkLeftIconName"` across all entries.	Mix left and right icon positions arbitrarily, causing alignment jitter.	`options[].iconPositionKey`

Accessibility

Provide explicit, readable action labels with options[].text so assistive technologies can announce them clearly.
- Prefer short, verb-led phrases in options[].text and avoid jargon to aid screen readers and translation.
Avoid meaning by color or icon alone by pairing options[].showMenuLinkIcon with text labels in options[].text.
Reduce occlusion and surprise by selecting a predictable placement so the dropdown appears where users expect.
Improve onboarding comprehension by enabling enableAsHotspot and supplying descriptive guidedTourHotSpotTitle and guidedTourHotSpotDescription strings.
Keep icon placement consistent using options[].iconPositionKey so the reading order remains stable.
Confirm destructive actions via options[].events using ON_OPTION_CLICK to present a confirmation step before the action proceeds.
Ensure consistent placement across similar menus by standardizing placement within a product area.