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/mobile-nav.

When to use it

Use MobileNav when the app is composing the header family directly and wants the mobile branch to stay inside the same supported vocabulary.

Use HeaderSection when the app wants the fast path. Use MobileNav when the app needs to control the mobile shell more directly.

Composition notes

MobileNav is intentionally small in the first pilot:

• MobileNav.Panel — mobile drawer wrapper
• MobileNav.Group — optional grouping container
• MobileNav.Utility — utility/footer content region
• MobileNav.Featured — mobile featured region placeholder

The first pilot keeps mobile behavior intentionally narrow. It is a family surface, not the final answer to every mobile navigation pattern.

When the drawer items mirror keyed desktop ownership, pass a stable id on each item so mobile and desktop branches can share the same conceptual ownership model.

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

Implementation notes