Versions Compared

Old Version 4

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version Current

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Overflow Menu

Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11600-88110&t=ftfrOGkPzlG2GaTo-1

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.

...

  • 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.
  • 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.

...

  • 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

  • Run setup logic at creation with ON_INIT (declared in events) when the menu should register analytics or prepare context for options.
  • 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.

...

DoDon’tArticle 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

Protocol of implemented accessibility measures

  • 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.
  • Support automated checks and stable selectors by setting dataTestId and id.
  • Improve onboarding comprehension by enabling enableAsHotspot and supplying descriptive guidedTourHotSpotTitle and guidedTourHotSpotDescription strings.

Practices to improve accessibility

  • Prefer short, verb-led phrases in options[].text and avoid jargon to aid screen readers and translation.
  • 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.Populate dataTestId to integrate automated accessibility tests and regressions in pipelines.