Navigation & Headers

Mega Menu

Desktop mega-menu compound built from `MegaMenu`, `MegaMenuTrigger`, and `MegaMenuContent` with auto-picked promo layouts.

Overview

MegaMenu is a compound built from a root (MegaMenu), per-category triggers (MegaMenuTrigger), and panel content (MegaMenuContent). Built on NavigationMenu primitives, so consumers can slot anything into the panel.

The promo slot picks its layout from the count of slotted children:

Children	Layout class	What you get
1	`--flex` + `--narrow`	Single column, narrow max-width.
2	`--flex`	Two columns, flex layout.
3+	`--grid`	Grid layout; the first child spans two rows.

The panel is surface-tone aware, so a dark header gets a panel with matching font and icon colors.

Key Business & UX Benefits

Auto-picked promo layout (narrow, flex, or grid) means merchandising teams can drop in one, two, or several promo tiles without asking design for a new template each campaign.
Wide visual surface lets shoppers see top-level categories and seasonal pushes at the same time, lifting click-through on promoted ranges without a dedicated landing page.
Surface-tone aware panels keep mega-menu content readable across dark headers and bright brand themes, protecting the look on every property without manual color overrides.
Compound architecture (root, trigger, content) lets engineers slot custom blocks per category, so a Sale tab can carry a different layout from the Men or Women tabs.

Pro-Tip from Larry: Set surface-tone="dark" when the header itself is dark; the panel inherits matching font and icon colors.

Usage

LMegaMenu

Feature List

Compound architecture splits root (`MegaMenu`), per-category `MegaMenuTrigger`, and panel `MegaMenuContent`
Built on `NavigationMenu` primitives so consumers can slot custom blocks into any panel
Promo slot auto-picks layout from child count: one child gets `--flex --narrow`, two get `--flex`, three or more get `--grid`
In the grid layout the first promo child spans two rows for a hero-style placement
`surface-tone` prop adapts the panel font and icon colors so dark headers and bright themes both stay readable
Triggers, content panels, and promo slots are configured directly on the compound, with no parent wrapper to inherit

API Reference

LMegaMenu

Prop	Default	Type
`items`required		`MegaMenuItem[] { id, children, variant, 8 more }` Top-level menu nodes. Each renders a trigger; its `children` populate the panel.
`columns`	`4`	`number` Number of columns in the panel.
`surfaceTone`		`"light" \| "dark"` Surface tone forwarded to `LinkTileCompact` instances inside the panel.
`defaultValue`		`string` Initial active item by id. Uncontrolled. Useful for stories / previews.
`delayDuration`		`number` ms before content opens on hover. Reka default is 200.
`skipDelayDuration`		`number` ms after a hover-close during which the next hover skips the open delay. Reka default is 300.

Slot	Type
`default`	`{}`

LMegaMenuTrigger

Prop	Default	Type
`item`required		`MegaMenuItem { id, children, variant, 8 more }` The item this trigger represents. `href` decides whether the trigger renders as a link or a button.

LMegaMenuContent

Prop	Default	Type
`item`required		`MegaMenuItem { id, children, variant, 8 more }` The item this trigger represents. `href` decides whether the trigger renders as a link or a button.
`columns`	`4`	`number` Number of columns in the panel.
`surfaceTone`		`"light" \| "dark"` Surface tone forwarded to `LinkTileCompact` instances inside the panel.

Slot	Type
`default`	`{}`

Edit this pageorReport an issue

Header Shop

E-commerce header with mega-menu, side-by-side, or dropdown navigation plus cart, account, wishlist, and search.

Menu Side by Side

Desktop side-by-side off-canvas category menu with slide-in transitions between hierarchical levels.