Add navigation menu component from Base UI (#25)

* Add navigation menu component from Base UI

- Implement NavigationMenuBaseComponent extending BaseUIComponent
- Add all navigation menu sub-components following existing patterns
- Create HighLevelNavigationMenu wrapper for simple usage
- Add to lazy loading system in __init__.py
- Include example in demo application
- Component renders and functions correctly with clickable buttons

Co-Authored-By: Carlos Cutillas <[email protected]>

* Remove HighLevelNavigationMenu component and update demo to use granular API

- Removed HighLevelNavigationMenu class as requested
- Updated demo to use ui.navigation_menu.root(), ui.navigation_menu.list(), etc.
- Removed unused imports (foreach, button)
- Fixed linting issues

Co-Authored-By: Carlos Cutillas <[email protected]>

* Enhance navigation menu demo to match Base UI example

- Add missing props to NavigationMenuRoot (delay, close_delay, actions_ref, on_open_change_complete)
- Update all component prop descriptions to match Base UI documentation exactly
- Create comprehensive demo with Overview and Handbook dropdowns
- Add rich content with links, titles, and descriptions
- Update ClassNames for better styling and transitions
- Include Portal structure for proper positioning
- Fix syntax error: use rx.el instead of rx.html for HTML elements

Co-Authored-By: Carlos Cutillas <[email protected]>

* fixes

* comment pre

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Carlos Cutillas <[email protected]>
Co-authored-by: carlosabadia <[email protected]>

Author: 3 people

.pre-commit-config.yaml

@@ -2,7 +2,7 @@ fail_fast: true
 
 repos:
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.12.2
+    rev: v0.12.3
     hooks:
       - id: ruff-check
         files: ^reflex_ui/

pyproject.toml

@@ -4,7 +4,7 @@ version = "0.0.1"
 description = "A set of reusable components built on top of Base UI and Tailwind, designed for use across any Reflex project"
 readme = "README.md"
 requires-python = ">=3.13"
-dependencies = ["reflex>=0.8.1"]
+dependencies = ["reflex>=0.8.2"]
 
 [build-system]
 requires = ["hatchling", "uv-dynamic-versioning"]

reflex_ui/__init__.py

@@ -13,6 +13,7 @@
     "components.base.input": ["input"],
     "components.base.link": ["link"],
     "components.base.menu": ["menu"],
+    "components.base.navigation_menu": ["navigation_menu"],
     "components.base.popover": ["popover"],
     "components.base.scroll_area": ["scroll_area"],
     "components.base.select": ["select"],

reflex_ui/__init__.pyi

@@ -15,6 +15,7 @@ from .components.base.gradient_profile import gradient_profile
 from .components.base.input import input
 from .components.base.link import link
 from .components.base.menu import menu
+from .components.base.navigation_menu import navigation_menu
 from .components.base.popover import popover
 from .components.base.scroll_area import scroll_area
 from .components.base.select import select
@@ -41,6 +42,7 @@ _REFLEX_UI_MAPPING = {
     "components.base.input": ["input"],
     "components.base.link": ["link"],
     "components.base.menu": ["menu"],
+    "components.base.navigation_menu": ["navigation_menu"],
     "components.base.popover": ["popover"],
     "components.base.scroll_area": ["scroll_area"],
     "components.base.select": ["select"],
@@ -78,6 +80,7 @@ __all__ = [
     "input",
     "link",
     "menu",
+    "navigation_menu",
     "popover",
     "scroll_area",
     "select",

reflex_ui/components/base/__init__.pyi

@@ -15,6 +15,7 @@ from .gradient_profile import gradient_profile
 from .input import input
 from .link import link
 from .menu import menu
+from .navigation_menu import navigation_menu
 from .popover import popover
 from .scroll_area import scroll_area
 from .select import select
@@ -43,6 +44,7 @@ __all__ = [
     "input",
     "link",
     "menu",
+    "navigation_menu",
     "popover",
     "scroll_area",
     "select",