Menu Component

A flexible floating menu foundation for dropdowns, tooltips, popovers, and any contextual overlay that needs smart positioning and trigger management.

Overview

The Menu component provides:

• Click or hover trigger handling with optional propagation control
• Smart positioning with collision detection and automatic flipping
• Responsive updates on window resize and scroll events
• Teleport-to-body rendering for predictable stacking order
• Configurable offsets, placements, widths, and custom classes
• Programmatic methods so parents can control the open state

When to Use

This is a base component primarily used to build higher-level primitives. Reach for it when you need bespoke overlays or advanced behavior beyond the bundled components:

• Dropdown
• Tooltip
• Popover

Key Features

• Trigger Types: Click or hover activation with optional propagation control.
• Smart Positioning: Automatically flips or nudges when the menu would overflow the viewport.
• Responsive: Updates position automatically on resize, scroll, or when trigger/offset props change.
• Teleport + Styling: Content teleports to body and accepts extra classes via menuContentClass.
• Sizing Options: Explicit width, trigger-width matching, REM-aware offsets, and fixed coordinates via fixedX/fixedY.
• Programmatic Control: Exposes openMenu, closeMenu, toggleMenu, and isOpen for parent components.

Advanced Features

Collision Detection

The menu automatically detects when it would overflow the viewport and intelligently flips to the opposite side or adjusts its position to stay within bounds.

Hover Support

When configured for hover activation, the menu includes a small delay before closing to prevent accidental dismissal when moving between trigger and menu.

Responsive Positioning

The menu maintains proper positioning relative to its trigger element even when the window is resized or the page is scrolled.

API Reference →

View Code →