DocsDocsSDKs

MegaMenu

React SDK guidance for MegaMenu.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

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 shell
  • MegaMenu.Groups — grouped browse column container
  • MegaMenu.Group — one grouped browse cluster
  • MegaMenu.Link — nav link inside the panel
  • MegaMenu.Featured — featured-content region
  • MegaMenu.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.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/storefront.
  • Playground route: /sandbox?component=MegaMenu.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

MegaMenu

# MegaMenu > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/storefront`. - Live playground: [/components/layout/mega-menu](https://sdk.enad.io/components/layout/mega-menu). ## 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 shell - `MegaMenu.Groups` — grouped browse column container - `MegaMenu.Group` — one grouped browse cluster - `MegaMenu.Link` — nav link inside the panel - `MegaMenu.Featured` — featured-content region - `MegaMenu.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. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/storefront`. - Playground route: /sandbox?component=MegaMenu. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes