Hover Menu

ProNew

A menu that opens when the mouse rests on its trigger and stays open while the pointer travels to it, with click, keyboard and touch opening it as well.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it for a persistent header or toolbar menu (Account, Products) where mouse users expect it to open on hover and everyone else needs it to still work.

Do not use it for destructive menus or menus that hold the only way to do something on touch devices. Do not nest hover menus.

Installation


pnpm dlx shadcn@latest add @tealmac-pro/hover-menu

It builds on dropdown-menu and data-menu, which the CLI installs for you.

Usage

API

HoverMenu

Prop	Type	Default	Description
`entries`	`MenuEntry[]`	-	Menu content (see Data Menu).
`openDelay`	`number`	`80`	Milliseconds before hover opens it.
`closeDelay`	`number`	`150`	Milliseconds before leaving closes it.
`align`	`"start" \| "center" \| "end"`	`start`	Alignment to the trigger.

Accessibility

Hover is only a convenience for mouse pointers: touch and pen ignore it, and the menu always opens with click or keyboard.
A close delay bridges the gap between trigger and menu, so crossing diagonally does not close it.
Closing a menu that hover opened does not pull focus back to the trigger; one opened by keyboard returns focus to it as any menu does.

Keyboard

Key	Action
Enter / Space / ArrowDown	opens the menu
Arrow keys, typeahead and Escape	as in any menu

Testing

The component ships a Testing Library test (hover-menu.test.tsx) that covers opening after the delay, the close delay bridging to the menu, touch being ignored and keyboard opening.

Guide and examples

When to use it

Use it for a persistent header or toolbar menu (Account, Products) where mouse users expect it to open on hover and everyone else needs it to still work.

Do not use it for destructive menus or menus that hold the only way to do something on touch devices. Do not nest hover menus.

Installation


pnpm dlx shadcn@latest add @tealmac-pro/hover-menu

It builds on dropdown-menu and data-menu, which the CLI installs for you.

Usage

API

HoverMenu

Prop	Type	Default	Description
`entries`	`MenuEntry[]`	-	Menu content (see Data Menu).
`openDelay`	`number`	`80`	Milliseconds before hover opens it.
`closeDelay`	`number`	`150`	Milliseconds before leaving closes it.
`align`	`"start" \| "center" \| "end"`	`start`	Alignment to the trigger.

Accessibility

Hover is only a convenience for mouse pointers: touch and pen ignore it, and the menu always opens with click or keyboard.
A close delay bridges the gap between trigger and menu, so crossing diagonally does not close it.
Closing a menu that hover opened does not pull focus back to the trigger; one opened by keyboard returns focus to it as any menu does.

Keyboard

Key	Action
Enter / Space / ArrowDown	opens the menu
Arrow keys, typeahead and Escape	as in any menu

Testing

The component ships a Testing Library test (hover-menu.test.tsx) that covers opening after the delay, the close delay bridging to the menu, touch being ignored and keyboard opening.