Skip to main content
The Navigation Menu component provides an accessible navigation pattern with support for hover interactions, keyboard navigation, and rich nested content.

​
Basic Usage

import reflex_ui as ui

ui.navigation_menu.root(
    ui.navigation_menu.list(
        ui.navigation_menu.item(
            ui.navigation_menu.trigger("Products"),
            ui.navigation_menu.portal(
                ui.navigation_menu.positioner(
                    ui.navigation_menu.popup(
                        ui.navigation_menu.viewport(
                            ui.navigation_menu.content(
                                ui.navigation_menu.link("Product 1", href="/product-1"),
                                ui.navigation_menu.link("Product 2", href="/product-2"),
                            )
                        )
                    )
                )
            ),
            value="products"
        ),
        ui.navigation_menu.item(
            ui.navigation_menu.link("About", href="/about")
        ),
    )
)

​
Component Structure

Groups all parts of the navigation menu: 
ui.navigation_menu.root(
    value="products",  # Controlled value
    on_value_change=lambda val: rx.toast(f"Selected: {val}"),
    orientation="horizontal",
    delay=50,
    close_delay=50
)
Individual navigation items: 
ui.navigation_menu.item(
    ui.navigation_menu.trigger("Features"),
    ui.navigation_menu.content(
        # Content here
    ),
    value="features"
)
Button that opens the popup: 
ui.navigation_menu.trigger(
    "Products",
    ui.navigation_menu.icon(
        ui.icon("ChevronDownIcon")
    ),
    disabled=False
)

​
Navigation Menu Content

Container for the menu content: 
ui.navigation_menu.content(
    ui.navigation_menu.link("Feature 1", href="/feature-1"),
    ui.navigation_menu.link("Feature 2", href="/feature-2"),
    keep_mounted=False
)
Link items within the menu: 
ui.navigation_menu.link(
    "Documentation",
    href="/docs",
    active=True
)

​
Props Reference

​
Root Props

​
value
str
The controlled value of the item that should be currently open
​
default_value
str
The uncontrolled value of the item initially selected
​
on_value_change
EventHandler
Callback fired when the value changes
​
orientation
Literal['horizontal', 'vertical']
default:"horizontal"
The orientation of the navigation menu
​
delay
int
default:"50"
How long to wait before opening the navigation menu in milliseconds
​
close_delay
int
default:"50"
How long to wait before closing the navigation menu in milliseconds

​
Item Props

​
value
str
Unique value identifying this item

​
Trigger Props

​
disabled
bool
default:"False"
Whether the component should ignore user interaction

​
Content Props

​
keep_mounted
bool
default:"False"
Whether to keep the HTML element in the DOM while the content is hidden
​
active
bool
Whether this link is currently active

​
Positioning Props

​
side
Literal['top', 'right', 'bottom', 'left']
default:"bottom"
Which side of the anchor to align the content against
​
align
Literal['start', 'center', 'end']
default:"center"
How to align the popup relative to the specified side
​
side_offset
int
default:"10"
Distance between the anchor and the content in pixels
​
sticky
bool
default:"False"
Whether to maintain the content in the viewport after scrolling

​
Styling

From source code at reflex_ui/components/base/navigation_menu.py:19-34:
  • Root has rounded corners and secondary background
  • List uses flex layout with minimal width
  • Trigger includes hover and active states with focus ring
  • Content has smooth transitions with activation direction support
  • Link items have hover states and focus rings

​
Implementation Details

From source code at reflex_ui/components/base/navigation_menu.py:48-82:
  • Built on accessible navigation patterns
  • Supports keyboard navigation with arrow keys
  • Automatic focus management
  • Smooth animations with configurable delays
  • Portal support for proper z-index layering

Build docs developers (and LLMs) love

Get started for freeTalk to us