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]>

Author: devin-ai-integration[bot]

demo/demo/demo.py

@@ -61,13 +61,87 @@ def index() -> rx.Component:
         ui.navigation_menu.root(
             ui.navigation_menu.list(
                 ui.navigation_menu.item(
-                    ui.navigation_menu.trigger("Home", on_click=lambda: rx.toast.success("Home clicked")),
+                    ui.navigation_menu.trigger(
+                        "Overview",
+                        ui.navigation_menu.icon("▼"),
+                    ),
+                    ui.navigation_menu.content(
+                        rx.el.ul(
+                            rx.el.li(
+                                ui.navigation_menu.link(
+                                    rx.el.h3("Quick Start", class_name="font-medium text-sm"),
+                                    rx.el.p("Install and assemble your first component.", class_name="text-xs text-secondary-11"),
+                                    href="/quick-start",
+                                    on_click=lambda: rx.toast.success("Quick Start clicked"),
+                                    class_name="block p-3 rounded hover:bg-secondary-3",
+                                )
+                            ),
+                            rx.el.li(
+                                ui.navigation_menu.link(
+                                    rx.el.h3("Accessibility", class_name="font-medium text-sm"),
+                                    rx.el.p("Learn how we build accessible components.", class_name="text-xs text-secondary-11"),
+                                    href="/accessibility",
+                                    on_click=lambda: rx.toast.success("Accessibility clicked"),
+                                    class_name="block p-3 rounded hover:bg-secondary-3",
+                                )
+                            ),
+                            rx.el.li(
+                                ui.navigation_menu.link(
+                                    rx.el.h3("Releases", class_name="font-medium text-sm"),
+                                    rx.el.p("See what's new in the latest versions.", class_name="text-xs text-secondary-11"),
+                                    href="/releases",
+                                    on_click=lambda: rx.toast.success("Releases clicked"),
+                                    class_name="block p-3 rounded hover:bg-secondary-3",
+                                )
+                            ),
+                            class_name="grid grid-cols-2 gap-2 w-96 p-2",
+                        )
+                    ),
                 ),
                 ui.navigation_menu.item(
-                    ui.navigation_menu.trigger("About", on_click=lambda: rx.toast.success("About clicked")),
+                    ui.navigation_menu.trigger(
+                        "Handbook",
+                        ui.navigation_menu.icon("▼"),
+                    ),
+                    ui.navigation_menu.content(
+                        rx.el.ul(
+                            rx.el.li(
+                                ui.navigation_menu.link(
+                                    rx.el.h3("Styling", class_name="font-medium text-sm"),
+                                    rx.el.p("Components can be styled with CSS, Tailwind, or CSS-in-JS.", class_name="text-xs text-secondary-11"),
+                                    href="/styling",
+                                    on_click=lambda: rx.toast.success("Styling clicked"),
+                                    class_name="block p-3 rounded hover:bg-secondary-3",
+                                )
+                            ),
+                            rx.el.li(
+                                ui.navigation_menu.link(
+                                    rx.el.h3("Animation", class_name="font-medium text-sm"),
+                                    rx.el.p("Components can be animated with CSS or JavaScript.", class_name="text-xs text-secondary-11"),
+                                    href="/animation",
+                                    on_click=lambda: rx.toast.success("Animation clicked"),
+                                    class_name="block p-3 rounded hover:bg-secondary-3",
+                                )
+                            ),
+                            class_name="flex flex-col gap-2 w-80 p-2",
+                        )
+                    ),
                 ),
                 ui.navigation_menu.item(
-                    ui.navigation_menu.trigger("Contact", on_click=lambda: rx.toast.success("Contact clicked")),
+                    ui.navigation_menu.link(
+                        "GitHub",
+                        href="https://github.com/reflex-dev/reflex-ui",
+                        on_click=lambda: rx.toast.success("GitHub clicked"),
+                    ),
+                ),
+            ),
+            ui.navigation_menu.portal(
+                ui.navigation_menu.positioner(
+                    ui.navigation_menu.popup(
+                        ui.navigation_menu.arrow(),
+                        ui.navigation_menu.viewport(),
+                    ),
+                    side_offset=10,
                 ),
             ),
         ),

reflex_ui/components/base/navigation_menu.py

@@ -22,15 +22,15 @@ class ClassNames:
     ROOT = "relative"
     LIST = "flex items-center gap-1"
     ITEM = "relative"
-    TRIGGER = "flex items-center gap-1 px-3 py-2 text-sm font-medium rounded-md hover:bg-secondary-3 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-4 cursor-pointer select-none"
-    CONTENT = "absolute top-full left-0 mt-1 min-w-48 origin-top-left border border-secondary-a4 bg-secondary-1 shadow-large rounded-md p-1 z-50 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0"
-    LINK = "block px-3 py-2 text-sm text-secondary-12 hover:bg-secondary-3 rounded-sm cursor-pointer select-none outline-none focus:bg-secondary-3"
-    ICON = "size-4 text-secondary-10"
+    TRIGGER = "flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md hover:bg-secondary-3 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-4 cursor-pointer select-none transition-colors"
+    CONTENT = "absolute top-full left-0 mt-2 min-w-64 origin-top-left border border-secondary-a4 bg-secondary-1 shadow-large rounded-lg p-2 z-50 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0"
+    LINK = "block px-3 py-2 text-sm text-secondary-12 hover:bg-secondary-3 rounded-md cursor-pointer select-none outline-none focus:bg-secondary-3 transition-colors"
+    ICON = "size-4 text-secondary-10 transition-transform data-[popup-open]:rotate-180"
     PORTAL = "relative"
     POSITIONER = "outline-none"
     POPUP = "outline-none"
-    VIEWPORT = "relative overflow-hidden"
-    ARROW = "data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180"
+    VIEWPORT = "relative overflow-hidden rounded-lg"
+    ARROW = "fill-secondary-1 stroke-secondary-a4 data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180"
     BACKDROP = "fixed inset-0 z-40"
 
 
@@ -58,6 +58,14 @@ class NavigationMenuRoot(NavigationMenuBaseComponent):
 
     orientation: Var[LiteralNavigationMenuOrientation]
 
+    delay: Var[int]
+
+    close_delay: Var[int]
+
+    actions_ref: Var[str]
+
+    on_open_change_complete: EventHandler[passthrough_event_spec(bool)]
+
     # The render prop.
     render_: Var[Component]
 
@@ -70,7 +78,7 @@ def create(cls, *children, **props) -> BaseUIComponent:
 
 
 class NavigationMenuList(NavigationMenuBaseComponent):
-    """Contains the navigation menu items. Renders a <ul> element."""
+    """Contains a list of navigation menu items. Renders a <div> element."""
 
     tag = "NavigationMenu.List"
 
@@ -86,7 +94,7 @@ def create(cls, *children, **props) -> BaseUIComponent:
 
 
 class NavigationMenuItem(NavigationMenuBaseComponent):
-    """Contains all parts of a navigation menu item. Renders a <li> element."""
+    """An individual navigation menu item. Renders a <div> element."""
 
     tag = "NavigationMenu.Item"
 
@@ -104,7 +112,7 @@ def create(cls, *children, **props) -> BaseUIComponent:
 
 
 class NavigationMenuTrigger(NavigationMenuBaseComponent):
-    """The button that toggles the content. Renders a <button> element."""
+    """Opens the navigation menu popup when hovered or clicked, revealing the associated content. Renders a <button> element."""
 
     tag = "NavigationMenu.Trigger"
 
@@ -123,7 +131,7 @@ def create(cls, *children, **props) -> BaseUIComponent:
 
 
 class NavigationMenuContent(NavigationMenuBaseComponent):
-    """Contains the content associated with each trigger. Renders a <div> element."""
+    """A container for the content of the navigation menu item that is moved into the popup when the item is active. Renders a <div> element."""
 
     tag = "NavigationMenu.Content"
 
@@ -139,7 +147,7 @@ def create(cls, *children, **props) -> BaseUIComponent:
 
 
 class NavigationMenuLink(NavigationMenuBaseComponent):
-    """A navigational link. Renders an <a> element."""
+    """A link in the navigation menu that can be used to navigate to a different page or section. Renders an <a> element."""
 
     tag = "NavigationMenu.Link"
 
@@ -157,7 +165,7 @@ def create(cls, *children, **props) -> BaseUIComponent:
 
 
 class NavigationMenuIcon(NavigationMenuBaseComponent):
-    """An optional icon to render alongside the trigger text. Renders a <span> element."""
+    """An icon that indicates that the trigger button opens a menu. Renders a <span> element."""
 
     tag = "NavigationMenu.Icon"