Mobile apps need navigation that adapts between two layouts — a slide-out flyout for touch-dense menus and a fixed bottom bar for tab-style navigation — without duplicating layout logic, styling, or active state management across a dozen screens. Without a compound abstraction, each screen builds its own overlay plumbing, mismatches the active state across routes, and breaks when dark mode or accessibility requirements change.

MobileMenu is a namespace of three subcomponents: MobileMenu.Flyout (a controlled slide-out panel with optional side and title), MobileMenu.BottomBar (a fixed bottom navigation surface), and MobileMenu.Item (a polymorphic menu entry that adapts its layout to the parent variant). Each item is stable — data-react-fancy-mobile-menu-item and data-active attributes — and supports href (renders <a>), onClick (renders <button>), icon, badge, active, and disabled props.

Import MobileMenu from @particle-academy/react-fancy, then choose your variant: wrap items in <MobileMenu.Flyout open={isOpen} onClose={handleClose}> for a modal slide-out, or <MobileMenu.BottomBar> for a persistent tab bar. Inside, compose <MobileMenu.Item href="/path" icon={iconNode} active={isCurrentPage}>Label</MobileMenu.Item> entries. The item adapts its visual layout (vertical icon stack in bottom bar, horizontal icon + label in flyout) via the variant context without needing separate branches.