About
An accessible, responsive top navigation menu for React with a "Mega Menu," styled by a shipped stylesheet and design tokens rather than CSS-in-JS.
v3 is a styling-architecture rewrite: it runs on React 19 and
Topiary design tokens instead of
Emotion. The Menu component, its config shape, and every rmm__* id and
class name stay the same, so migrating is mostly a dependency and stylesheet
swap. The React 18 / Emotion line lives on as the v2.x branch for anyone not
ready to move.
Key Features
- WCAG 2.1 AA compliant, W3C valid markup: scanned with axe in every state (closed, open, sub-panel open, mobile and desktop) as part of the test suite, with a recorded keyboard walkthrough kept alongside it
- Fly-out mega panels and nested sub-panels from a single config object, with full keyboard support: Tab order, Enter/Space to open, Escape to close and return focus, and outside click to close
- Responsive: an off-canvas nav with a hamburger toggle below the
largebreakpoint, a horizontal bar above it, with a configurable slide-in side (slideDirection) - Plain CSS, no runtime styling library: one stylesheet, every value
routed through a documented
--rmm-*token layer that defaults to Topiary tokens with hardcoded fallbacks—so it re-skins across all four Topiary themes from identical markup, and still renders correctly on its own if Topiary isn't present - Ships its own TypeScript declarations and respects prefers-reduced-motion
Demos
Two demos prove out different parts of the system:
demo/: a Vite + React 19 + TypeScript app with a four-theme switcher and aslideDirectiontogglenext-demo/: a Next.js 15 App Router app proving server-side rendering with no unstyled flash
Use Cases
Perfect for:
- E-commerce sites with complex category navigation
- Enterprise dashboards with multi-level menus
- Documentation sites with hierarchical content
- Any application requiring sophisticated, accessible navigation