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.

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.