# MobileNav

- Page: https://jiguang132.com/resources/astryx/docs/mobile-nav
- Resource: Astryx (https://jiguang132.com/resources/astryx.md)
- All guides: https://jiguang132.com/resources/astryx/docs.md

A slide-out drawer for mobile navigation. MobileNav is the mobile counterpart to SideNav and accepts the same children. Use it on narrow viewports where a persistent sidebar is not practical. Inside AppShell, use MobileNavToggle as the trigger; it reads state from context automatically.

## Installation

```bash
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
```

Requires React 19+, base CSS and a Theme provider. See [Setup](/resources/astryx/docs/getting-started).

## Mobile Nav

A slide-out drawer for mobile navigation. MobileNav is the mobile counterpart to SideNav and accepts the same children. Use it on narrow viewports where a persistent sidebar is not practical. Inside AppShell, use MobileNavToggle as the trigger; it reads state from context automatically.

### Usage guidance

- Share the same nav items between MobileNav and SideNav by extracting them into a variable.
- Provide a header when the drawer's purpose is not obvious from its content.
- Inside AppShell, use MobileNavToggle to open the drawer; it reads state from context. Do not pass isOpen/onOpenChange to the toggle.
- Avoid: Use MobileNav on desktop: use a persistent SideNav instead.

### Theming API

```json
{
  "targets": [
    {
      "className": "astryx-mobile-nav",
      "visualProps": [
        "side"
      ]
    }
  ]
}
```

## Mobile Nav

A slide-out drawer for mobile navigation. Accepts SideNav children.

| Prop | Type | Default | Description |
|---|---|---|---|
| isOpen | boolean |  | Whether the drawer is open. Inside AppShell, this is managed automatically via context. Outside AppShell, provide this prop to control the drawer yourself. |
| onOpenChange | (isOpen: boolean) => void |  | Called when the drawer visibility changes (backdrop click, Escape key, or close button). Inside AppShell, this is managed automatically via context. |
| children * | ReactNode |  | Drawer content: typically SideNavSection/SideNavItem, or any ReactNode. |
| header | ReactNode |  | Header content for the drawer. Rendered next to the close button. Pass a string for a simple text heading, or a ReactNode for custom content (logo, search bar, etc.). |
| width | number | 320 | Drawer width in pixels. Capped at 85vw to prevent overflow on small screens. |
| side | 'start' \| 'end' \| 'auto' | 'auto' | Which side the drawer slides from. Start is left in LTR, right in RTL. Auto picks a side based on the trigger position. |

## Mobile Nav Toggle

Hamburger button that opens/closes the mobile nav drawer. Reads open state from AppShell context automatically: does NOT accept isOpen or onOpenChange props. Renders nothing above the mobile breakpoint.

| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode |  | Custom content to render instead of the default hamburger icon. |
| label | string | 'Open navigation' | Accessible label for the toggle button. |

### Anatomy

- **Navigation overlay**: Full-viewport dialog overlay that hosts the mobile navigation drawer.
- **Drawer**: Painted panel that slides in from the resolved viewport edge.
- **Header**: Fixed row containing optional header content and the close button.
- **Content**: Scrollable region containing the navigation content.
- **Close button**: Button that closes the navigation drawer.
- **Toggle button**: AppShell-aware Button that opens or closes the drawer on mobile viewports.


## Examples

- Mobile Nav: 
- Mobile Nav Toggle: Demonstrates MobileNavToggle as a standalone hamburger button for opening the mobile navigation drawer.
- MobileNav — Basic Drawer: Mobile navigation drawer with sectioned nav items triggered by a menu button
- MobileNav — End Side Drawer: Navigation drawer that slides in from the right side of the screen
- MobileNavToggle — Basic: A nav toggle with a custom icon and accessible label instead of the default hamburger. It opens a MobileNav drawer via the AppShell mobile context, which AppShell provides automatically.
- MobileNav — Without Title: Mobile navigation drawer without a title header

## Complete example dependencies

Some examples import optional icons. The per-example install command in the examples list identifies exactly what that example needs. For all examples on this page:

```bash
npm install @heroicons/react@2.2.0
```

---

Index of all JGuang resources: https://jiguang132.com/llms.txt