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/store-navigation.

When to use it

Use StoreNavigation when the app wants the main storefront navigation shell to be easy to author through data and one open action-area seam.

That usually means:

• the logo, top-level sections, and mobile drawer should come as one supported surface
• the desktop mega-menu needs grouped browse columns without hand-assembling PrimaryNav + MegaMenu every time
• the action area needs to stay open enough for brand-specific structure without dragging app-specific behavior into the public data contract
• the page needs route-aware highlighting for the current top-level browse path

Public contract

StoreNavigation keeps the public data model intentionally moderate:

• logo — brand mark or brand wordmark content
• sections — top-level navigation sections with optional grouped desktop panel content
• actions — open React seam for the action area
• mobileDrawerExtra — bottom-of-drawer support content
• variant — shared header visual treatment (default, transparent, overlay)
• currentHref — optional current route for active-state highlighting

Each section can stay simple:

• plain top-level destination with just label and href
• grouped mega-menu owner with groups
• emphasis marker for sections or links that need a slightly stronger visual role

Relationship to HeaderSection and StoreHeader

• HeaderSection — use it when the page wants the broader section-first header with promo and utility zones included.
• StoreNavigation — use it when the page mainly needs the primary navigation shell, action area, and mobile drawer extras.
• StoreHeader + family parts — use them when the shell anatomy itself needs lower-level composition control.

That ordering is intentional: start with the highest public surface that already matches the job.

Behavior and theming guidance

StoreNavigation is built on the existing header family rather than replacing it.

That means it keeps:

• the shared fixed-shell behavior
• the existing transparent and overlay variants
• the same mobile drawer model beneath MobileNav
• the same desktop panel behavior beneath PrimaryNav and MegaMenu

If the shell needs promo hierarchy, utility rows, or several unrelated custom zones, step either up to HeaderSection or down to StoreHeader depending on which shape is closer.

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=StoreNavigation.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes