Overflow List Menu Alpha Light DOM & Tailwind

Usage

Overflow List Menu is the declarative action companion to Overflow List. Place it directly in the list with slot="overflow". It owns a Nord Dropdown, mirrors the current hidden actions in their original order, and forwards menu activation to each original element without moving or cloning it.

import "@nordhealth/components/lib/OverflowListMenu"

Composition

Overflow List Menu is the overflow affordance for actionable content. It consumes hidden-item state from the nearest Overflow List and maintains the relationship between each generated menu item and its original action while the consumer controls placement through the overflow slot and DOM order.

Examples

Placement and labels

Keep the helper last in DOM order for collapse-from="end" and first for collapse-from="start". This keeps keyboard order aligned with the visual row in both LTR and RTL layouts.

Use size="s", size="m", or size="l" to match the action row. The toggle shows +N more by default; add compact to show +N. Set singular-label and plural-label to produce a complete accessible phrase such as “Show 1 more action” or “Show 3 more actions”.

Action equivalence

Menu labels prefer each original action’s aria-label, then its trimmed text. Disabled and aria-disabled originals remain disabled in the menu, and activating a generated item invokes the original action so its listener and state remain authoritative. The listener runs once with its currentTarget set to the original element.

Forwarding uses HTMLElement.click(), so the click dispatched on the original is programmatic and its isTrusted value is false. For product-specific behavior that requires a trusted event or that the helper cannot mirror, provide custom slot="overflow" content and synchronize it from nord-overflow-change as described on the Overflow List page.

Accessibility

• Use this helper whenever hidden actions need an equivalent keyboard-accessible representation.
• Keep the helper at the logical collapse edge rather than visually reordering it with CSS.
• Give icon-only originals an aria-label so their generated menu items have meaningful names.