MobileNav

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

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.

Mobile Nav

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

{
  "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:

npm install @heroicons/react@2.2.0