Mega Menu

Pro

A navigation bar whose items open wide panels of grouped links. One panel resizes between items, and a safe triangle keeps it steady on a diagonal path.

pnpm dlx shadcn@latest add @latheui/mega-menu

Part of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.

Mega Menu is part of Lathe Pro

The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.

Get Pro I have Pro

Depends on

lucide-react
radix-ui
lathe/use-controllable-state
lathe/use-safe-triangle

API reference

MegaMenu

Also accepts Radix NavigationMenu root props, such as delayDuration. An item's value is its label, so value="Product" opens that panel.

Prop	Type	Default	Description
items* (required)	MegaMenuItem[]	—	Top-level items, in order.
label	string	"Main"	Accessible name of the navigation landmark.
renderLink	(link: { href, className, children }) => ReactElement	an <a>	Renders every link. Return your router's link here.
safeTriangle	boolean	true	While the pointer moves from an open item toward its panel, other items it crosses do not take over and the gap does not close the panel.
safeTriangleTimeout	number	300	Milliseconds the pointer may rest on its way before the item under it takes over.
showSafeTriangle	boolean	false	Draws the triangle while it is active. For tuning and demos.

MegaMenuItem

Prop	Type	Default	Description
label* (required)	string	—	Text in the bar.
href	string	—	Makes the item a plain link. Used when there are no sections.
sections	MegaMenuSection[]	—	Columns of the panel: { heading?, links }.

MegaMenuLink

Prop	Type	Default	Description
title* (required)	string	—	Link text.
href* (required)	string	—	Destination.
description	string	—	A line under the title. Sections without descriptions are drawn as a compact list.
icon	ReactNode	—	Shown before the title.

Keyboard

Tab: Moves through the bar, and through an open panel's links.
EnterSpace: Opens or closes an item's panel.
ArrowLeftArrowRight: Moves between items in the bar.
ArrowDown: Moves from an open item into its panel.
Escape: Closes the panel and returns focus to its item.

Accessibility

It is a navigation landmark built on Radix NavigationMenu. Items with panels are buttons that report whether they are expanded.
Panels open on hover after a short delay and also on click, so they work on touch and for people who cannot hover precisely.
Links are real links: they can be opened in a new tab and are found by screen reader link lists.
On narrow screens a panel stacks its sections and never grows wider than the screen. For phones, pair it with a drawer.
The safe triangle only follows a mouse. Clicks, touch and the keyboard switch panels at once.

Motion

The panel fades and scales in, and its width and height ease between items over 200ms. The chevron turns.
With reduced motion the panel appears and resizes at once.
The safe triangle narrows as the pointer moves: each move must keep heading for the panel's near edge, with 8px of slack for a shaky hand.

Customization

Use your router's link

import Link from "next/link"

<MegaMenu
  items={items}
  renderLink={({ href, className, children }) => (
    <Link href={href} className={className}>
      {children}
    </Link>
  )}
/>

API reference

MegaMenu

Also accepts Radix NavigationMenu root props, such as delayDuration. An item's value is its label, so value="Product" opens that panel.

Prop	Type	Default	Description
items* (required)	MegaMenuItem[]	—	Top-level items, in order.
label	string	"Main"	Accessible name of the navigation landmark.
renderLink	(link: { href, className, children }) => ReactElement	an <a>	Renders every link. Return your router's link here.
safeTriangle	boolean	true	While the pointer moves from an open item toward its panel, other items it crosses do not take over and the gap does not close the panel.
safeTriangleTimeout	number	300	Milliseconds the pointer may rest on its way before the item under it takes over.
showSafeTriangle	boolean	false	Draws the triangle while it is active. For tuning and demos.

MegaMenuItem

Prop	Type	Default	Description
label* (required)	string	—	Text in the bar.
href	string	—	Makes the item a plain link. Used when there are no sections.
sections	MegaMenuSection[]	—	Columns of the panel: { heading?, links }.

MegaMenuLink

Prop	Type	Default	Description
title* (required)	string	—	Link text.
href* (required)	string	—	Destination.
description	string	—	A line under the title. Sections without descriptions are drawn as a compact list.
icon	ReactNode	—	Shown before the title.

Accessibility

It is a navigation landmark built on Radix NavigationMenu. Items with panels are buttons that report whether they are expanded.
Panels open on hover after a short delay and also on click, so they work on touch and for people who cannot hover precisely.
Links are real links: they can be opened in a new tab and are found by screen reader link lists.
On narrow screens a panel stacks its sections and never grows wider than the screen. For phones, pair it with a drawer.
The safe triangle only follows a mouse. Clicks, touch and the keyboard switch panels at once.

Motion

The panel fades and scales in, and its width and height ease between items over 200ms. The chevron turns.
With reduced motion the panel appears and resizes at once.
The safe triangle narrows as the pointer moves: each move must keep heading for the panel's near edge, with 8px of slack for a shaky hand.

API reference

MegaMenu

MegaMenuItem

MegaMenuLink

Keyboard

Accessibility

Motion

Customization

Use your router's link

Related

API reference

MegaMenu

MegaMenuItem

MegaMenuLink

Keyboard

Accessibility

Motion

Customization

Use your router's link

Related