Theme Playground

Layout

MobileNav

Mobile navigation family surface for drawer-led navigation, utility footer content, and mobile-only navigation structure beneath the StoreHeader shell.

Best for

mobile drawer navigationmobile utility footer contentmobile-only shell structure

Import

import { MobileNav } from "@enadhq/enad-react-sdk/client/storefront"

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.

Examples

Live examples you can edit directly in the sandbox.

1 example

Mobile drawer through the family surface

Use MobileNav.Panel as the family-level wrapper around the existing drawer behavior, then add utility content below when needed.

Component Sets

Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.

Props

PropTypeDefaultDescription
classNamestring
No description yet.