szhsin/react-menu
React Menu
React Menu is a library for building accessible, keyboard-navigable dropdown and context menus within web applications. It provides a set of tools for creating complex, hierarchical navigation structures that support unlimited submenu nesting and standard accessibility patterns for screen reader compatibility.
The library distinguishes itself through a focus on dynamic layout and positioning, utilizing real-time collision detection to adjust menu placement relative to anchor elements and viewport boundaries. It employs a portal-based rendering strategy to prevent clipping and z-index conflicts, while offering flexible configuration options that allow developers to inject custom components, icons, and interactive form elements directly into the menu structure.
Beyond basic navigation, the system supports advanced interaction patterns including programmatic visibility control, server-side rendering for improved initial load performance, and the integration of selection controls like radio buttons and checkboxes. The architecture relies on compound component and render prop patterns to provide a flexible API for managing state and custom event handling across deep navigation hierarchies.
Features
- Menu Libraries - Provides a library for building accessible, keyboard-navigable dropdown and context menus.
- Accessible Navigation Menus - Provides accessible dropdown and context menus with full keyboard navigation and screen reader support.
- Menu Visibility State Machines - Uses centralized state management to orchestrate menu visibility, transitions, and programmatic control over open and closed states.
- Navigation Component Libraries - Provides tools for creating complex, hierarchical navigation structures and interactive selection menus.
- Viewport-Aware Position Calculators - Provides real-time collision detection and viewport-aware positioning to ensure menus remain visible within the browser window.
- Accessible Menu Rendering - Supports rendering arbitrary components and interactive elements within menu items using flexible patterns.
- Accessible UI Components - Builds accessible dropdown and context menus that support inclusive web interface standards.
- Compound Components - Implements a compound component pattern to share state and logic across nested menu structures.
- Embedded Menu Inputs - Allows embedding interactive form controls like checkboxes and radio buttons directly into menu items for complex selection workflows.
- Render Props - Uses render props to expose internal state, allowing developers to inject custom UI elements into the menu.
- Floating Element Positioning - Calculates dynamic coordinate offsets for floating menus relative to anchor elements.
- Keyboard Event Delegation - Orchestrates keyboard events to manage focus movement and navigation across deep menu hierarchies.
- Navigation Hierarchies - Supports complex, multi-level navigation hierarchies with unlimited submenu nesting.
- Nested Menus - Supports hierarchical navigation structures with nested submenus to any depth.
- Portal Rendering - Employs portal-based rendering to mount menu elements outside the main DOM tree, preventing clipping and z-index conflicts.
- Collision Detection - Utilizes real-time collision detection to adjust menu placement and prevent viewport overflow.
