Navigation·component·@astryxdesign/core

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.

Open in Playground @astryxdesign/core/MobileNav

Showcases and examples

4 documented examples

Mobile Nav

MobileNav API entry

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · mobile-nav-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {useState} from 'react';
import {MobileNav} from '@astryxdesign/core/MobileNav';
import {SideNavSection, SideNavItem} from '@astryxdesign/core/SideNav';
import {Button} from '@astryxdesign/core/Button';
import {Icon} from '@astryxdesign/core/Icon';

export default function MobileNavShowcase() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button
        label="Open Navigation"
        icon={<Icon icon="menu" color="inherit" />}
        variant="ghost"
        onClick={() => setIsOpen(true)}
        isIconOnly
      />
      <MobileNav isOpen={isOpen} onOpenChange={setIsOpen} header="Navigation">
        <SideNavSection title="Main">
          <SideNavItem label="Dashboard" isSelected href="/dashboard" />
          <SideNavItem label="Projects" href="/projects" />
          <SideNavItem label="Analytics" href="/analytics" />
        </SideNavSection>
        <SideNavSection title="Settings">
          <SideNavItem label="General" href="/settings" />
          <SideNavItem label="Team" href="/team" />
        </SideNavSection>
      </MobileNav>
    </>
  );
}

Usage

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.
Use MobileNav on desktop: use a persistent SideNav instead.

Typed props

MobileNav

Prop	Type and behavior
`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` · required 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` · default 320 Drawer width in pixels. Capped at 85vw to prevent overflow on small screens.
`side`	`'start' \| 'end' \| 'auto'` · default 'auto' Which side the drawer slides from. Start is left in LTR, right in RTL. Auto picks a side based on the trigger position.

MobileNavToggle

Prop	Type and behavior
`children`	`ReactNode` Custom content to render instead of the default hamburger icon.
`label`	`string` · default 'Open navigation' Accessible label for the toggle button.

Anatomy

Navigation overlay · required

Full-viewport dialog overlay that hosts the mobile navigation drawer.

Drawer · required

Painted panel that slides in from the resolved viewport edge.

Header · required

Fixed row containing optional header content and the close button.

Content · required

Scrollable region containing the navigation content.

Close button · required

Button that closes the navigation drawer.

Toggle button · optional

AppShell-aware Button that opens or closes the drawer on mobile viewports.

Theming

Targets

astryx-mobile-nav

Visual props: side