Mega Menu | Zyeon UI

Preview in your theme

Full product nav — openOn="hover" (default). Hovering a closed bar waits 120ms before it commits; once a sheet is open, sliding sideways switches instantly instead of re-timing. The sheet is portalled to <body> and spans the whole navbar. "Changelog" has no panel, so it is a plain link. collapseBelow={520} is lowered from the 768 default because this docs stage is only ~730px wide — narrow the window and the bar folds into the accordion on its own.

openOn="click" — no hover intent at all: the sheet opens on click/tap and stays until you click the trigger again, press Escape, or click outside. This is the variant to ship when the nav must behave identically on touch.

Keyboard + controlled value — Tab reaches each top-level entry. ← / → move between entries, Home / End jump to the first / last, ↓ (or Enter / Space) opens the sheet and moves focus onto its first link, Tab walks the links, Tab off either end closes the sheet and hands focus back to the trigger, Escape closes and restores focus too. The open item is owned by this page through value / onValueChange.

value = null

Narrow container — the same items in a 360px column. Below collapseBelow (768px by default, measured on the component, not the viewport) the bar degrades to a stacked accordion: each panel opens in flow under its own entry, no portal, no floating sheet, tap to toggle. ↑ / ↓ move between entries there, → opens, ← closes.

Plain links, no panels — every entry here renders as a real <a href>, so the browser shows the target on hover and a click really navigates. "Templates (soon)" has neither href nor panel and renders as an inert label rather than a button that does nothing.

orientation="vertical" — the accordion form on purpose, at full width. Same markup and same keyboard model as the auto-degraded bar; use it when the nav lives in a drawer or a column instead of a header.

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro