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-menu-drawer.

When to use it

Use MobileMenuDrawer when the app needs a mobile navigation panel that slides in from the left edge and should keep a stable branded structure around the nav tree.

It handles the default two-level navigation behavior, but now also supports explicit region ownership for:

• a top drawer header
• a featured campaign/editorial area
• utility links and support content
• a final footer or locale/account strip

In many storefronts, Header.Drawer is still the easiest way to use it because it shares state with Header.MenuButton. Use MobileMenuDrawer directly when building a fully custom mobile shell.

Preferred composition surface

Use child slots for the surrounding chrome:

• MobileMenuDrawer.Header
• MobileMenuDrawer.Body
• MobileMenuDrawer.Featured
• MobileMenuDrawer.Utility
• MobileMenuDrawer.Footer

The drawer still owns open/close state and the default two-level item behavior.

Compatibility note

Unmarked children still render in the lower drawer region, so existing usage keeps working. The new slot wrappers simply make that closing region more explicit and easier to structure.

Use child slots for chrome, not data modeling

Keep items as the navigation data model. Use the slot surface for the branded framing around the nav tree: utility links, campaign cards, locale/account content, or a drawer-specific footer.

Behavior and theming guidance

The drawer still uses the Sheet primitive with side="left", full-height scrolling content, and the same reset-on-close submenu behavior.

When the drawer closes, it resets back to the top-level menu. The new slot regions stay available in both root and submenu states unless the app replaces the body entirely through MobileMenuDrawer.Body.

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

Implementation notes