The Nested Menu Problem

Anyone who has navigated a multi-level menu knows the frustration: you hover over a parent item, the submenu appears, but the moment your cursor strays the few pixels between the two levels, the entire menu vanishes. This isn't a user error — it’s a design flaw. Menus that rely on hover need to account for the physical gap between the trigger and the flyout.

The common fix is known as the “safe triangle” — a concept popularized by Amazon’s mega-dropdowns and discussed in depth by developers like Ben Kamens. The idea is simple: create an invisible hoverable area connecting the menu item to its submenu, so the user never accidentally “leaves” the interactive zone. Modern implementations of this trick can be seen in products like VS Code, macOS, and the open-source Radix UI library’s Dropdown Menu component.

There’s a straightforward way to build this yourself using SVG and a bit of mouse tracking. The approach works with any UI framework, though the example below is written in React.

Why Hover Matters

Before diving into the solution, it’s worth noting that hover-based menus aren’t universally ideal. Touch devices don’t have a hover state, and some users prefer explicit clicks. Amazon’s main navigation, for instance, requires a click to open and another to drill down.

That said, hover interactions save clicks and can feel more polished when done right. The goal is to make them robust enough to avoid accidental closures — which is exactly what a safe triangle achieves.

How the Safe Triangle Works

The technique relies on two key ingredients: an SVG overlay and the CSS pointer-events property. The approach, which I implemented in the main navigation for Neo4j, works as follows.

Mouse Enter and Leave Handlers

When a menu item with children is hovered, an onMouseEnter callback opens the submenu:

onMouseEnter={() => setOpen(true)}

An onMouseLeave callback normally closes the submenu when the pointer leaves the item and its children:

onMouseLeave={() => setOpen(false)}

In this implementation, a <SafeArea /> component is placed between the trigger and the submenu to capture hover events in that gap.

Drawing the Triangle with SVG

The SafeArea component contains an SVG element that’s invisible but active. The triangle’s dimensions are dynamic: it’s as tall as the submenu and as wide as the distance from the cursor to the submenu’s edge. As long as the pointer is inside this SVG, the submenu remains open.

The SVG path consists of three points — the cursor’s position and two corners of the submenu. For example, the path might look like:

M 0, {mouseY - submenuY} L {svgWidth}, {svgHeight} L {svgWidth}, 0 Z

The z command closes the path, creating a triangle. To make this work, pointer-events must be set to none on the SVG container and auto on the path element itself. This ensures only the triangle captures mouse events, while the rest of the SVG area is “see-through” for interactive purposes.

A mouse listener (onmousemove) continuously updates the triangle’s coordinates, based on the user’s cursor position, so the safe zone always sits between the cursor and the submenu.

A Note on Path Shapes

The triangle is the simplest shape for this purpose, but it isn’t always the best fit. In practice, a curved path can be more forgiving, especially when a user moves diagonally toward a sibling menu item. The principle remains the same — just adjust the SVG path to match the desired safe zone.

Watch Out for Edge Cases

This approach is intentionally simple, which means it has limitations. If the user’s cursor moves diagonally and touches another menu item, the current submenu may close unintentionally. In that case, you might want a different behavior. One workaround is to debounce a cleanup function — on every mouse move, reset a timer that removes the SVG after a few milliseconds of inactivity. This gives users a brief grace period before the menu closes.

Another consideration is the shape itself. While a triangle works for straight-line paths, your menu’s layout might require a custom shape to smoothly bridge the gap. Experimenting with curved paths, similar to those used in Needle’s approach, can yield better results.

Is It Worth It?

Implementing a safe triangle is a small change that greatly improves the usability of hover-based nested menus. It’s a user experience win that doesn’t require a major architectural shift. Whether you’re building a context menu, a dropdown, or a full navigation system, keeping the submenu open while the user travels the gap is a detail that makes the interface feel just right.