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-header.

When to use it

Use StoreHeader when the app wants the supported family anatomy but not the higher-level HeaderSection wrapper.

That usually means:

• the storefront wants to own the exact shell order
• the utility, primary nav, or action regions need bespoke composition
• the app still wants a stable path back to the public navigation family instead of rebuilding on raw primitives

Composition model

StoreHeader is the shell root of the new navigation family.

Public shell regions:

• StoreHeader.Promotion — top promo strip region
• StoreHeader.Mobile — mobile shell branch
• StoreHeader.Desktop — desktop shell branch
• StoreHeader.Top — top utility row
• StoreHeader.Main — primary shell row
• StoreHeader.Logo — logo anchor
• StoreHeader.Actions — action cluster wrapper
• StoreHeader.Action — action button or action link
• StoreHeader.MobileTrigger — menu opener tied to the shared drawer state
• StoreHeader.MobilePanel — mobile drawer wrapper

Use sibling family surfaces to fill those shell zones:

• UtilityNav
• PrimaryNav
• MegaMenu
• MobileNav
• PromotionBar

How it differs from HeaderSection

• HeaderSection = section-first fast path
• StoreHeader = family root for lower-level composition

If the page mostly fits a standard header shape, start with HeaderSection. If the shell itself is where variation lives, use StoreHeader.

Behavior and theming guidance

StoreHeader intentionally preserves the current fixed-shell behavior from the existing header model while making the family anatomy clearer.

Use it when the app needs more shell-level control, but still wants:

• the supported overlay/transparent/default variants
• the shared mobile drawer state model
• a public, documented shell vocabulary instead of a private one-off header

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

Implementation notes