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