MegaMenu
Desktop navigation panel family for grouped browse destinations and featured editorial or campaign content beneath the top-level header shell.
Best for
Import
import { MegaMenu } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use MegaMenu when the desktop browse system needs more than a simple row of links.
It fits:
- category-dense browse structures
- featured destination cards
- campaign or editorial panels next to grouped browse links
Composition notes
MegaMenu is a parent-led panel family:
MegaMenu.Panel— the actual desktop panel shellMegaMenu.Groups— grouped browse column containerMegaMenu.Group— one grouped browse clusterMegaMenu.Link— nav link inside the panelMegaMenu.Featured— featured-content regionMegaMenu.Feature— default featured card treatment
If the default featured cards are close, use MegaMenu.Feature.
If the featured zone needs a custom treatment, replace the whole featured region through HeaderSection.featured.content or compose MegaMenu.Featured directly.
Examples
Live examples you can edit directly in the sandbox.
Grouped categories with featured content
Use MegaMenu.Groups for grouped browse structure and MegaMenu.Featured for destination cards or editorial campaign content.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | No description yet. |