diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index a4a7669..99e0163 100644
--- a/.pre-commit-config.yaml
+++ b/.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/
diff --git a/pyproject.toml b/pyproject.toml
index 1cc2560..ce532f0 100644
--- a/pyproject.toml
+++ b/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"]
diff --git a/reflex_ui/__init__.py b/reflex_ui/__init__.py
index 446e414..68a6459 100644
--- a/reflex_ui/__init__.py
+++ b/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"],
diff --git a/reflex_ui/__init__.pyi b/reflex_ui/__init__.pyi
index b8705d3..5ffd8ca 100644
--- a/reflex_ui/__init__.pyi
+++ b/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",
diff --git a/reflex_ui/components/base/__init__.pyi b/reflex_ui/components/base/__init__.pyi
index 81b4b4d..2436a31 100644
--- a/reflex_ui/components/base/__init__.pyi
+++ b/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",
diff --git a/reflex_ui/components/base/navigation_menu.py b/reflex_ui/components/base/navigation_menu.py
new file mode 100644
index 0000000..deaf9ea
--- /dev/null
+++ b/reflex_ui/components/base/navigation_menu.py
@@ -0,0 +1,336 @@
+"""Custom navigation menu component."""
+
+from typing import Literal
+
+from reflex.components.component import Component, ComponentNamespace
+from reflex.event import EventHandler, passthrough_event_spec
+from reflex.utils.imports import ImportVar
+from reflex.vars.base import Var
+
+from reflex_ui.components.base_ui import PACKAGE_NAME, BaseUIComponent
+
+LiteralNavigationMenuOrientation = Literal["horizontal", "vertical"]
+LiteralSide = Literal["top", "right", "bottom", "left"]
+LiteralAlign = Literal["start", "center", "end"]
+LiteralPositionMethod = Literal["absolute", "fixed"]
+LiteralCollisionAvoidance = Literal["flip", "shift", "auto"]
+
+
+class ClassNames:
+    """Class names for navigation menu components."""
+
+    ROOT = "min-w-max rounded-lg bg-secondary-1 p-1 text-secondary-12"
+    LIST = "relative flex"
+    ITEM = "relative"
+    TRIGGER = "box-border flex items-center justify-center gap-1.5 h-10 px-2 xs:px-3.5 m-0 rounded-md bg-secondary-1 text-secondary-12 font-medium text-[0.925rem] xs:text-base leading-6 select-none no-underline hover:bg-secondary-3 active:bg-secondary-3 data-[popup-open]:bg-secondary-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-4"
+    CONTENT = "w-max max-w-[calc(100vw-40px)] sm:max-w-[600px] p-6 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%]"
+    LINK = "block rounded-md p-2 xs:p-3 no-underline text-inherit hover:bg-secondary-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-4"
+    ICON = "transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180 text-secondary-10"
+    PORTAL = ""
+    POSITIONER = "box-border h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
+    POPUP = "relative h-[var(--popup-height)] w-max origin-[var(--transform-origin)] rounded-lg bg-secondary-1 text-secondary-12 shadow-large border border-secondary-a4 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 min-[500px]:w-[var(--popup-width)] xs:w-[var(--popup-width)]"
+    VIEWPORT = "relative h-full w-full overflow-hidden"
+    ARROW = "flex transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] 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"
+
+
+class NavigationMenuBaseComponent(BaseUIComponent):
+    """Base component for navigation menu components."""
+
+    library = f"{PACKAGE_NAME}/navigation-menu"
+
+    @property
+    def import_var(self):
+        """Return the import variable for the navigation menu component."""
+        return ImportVar(tag="NavigationMenu", package_path="", install=False)
+
+
+class NavigationMenuRoot(NavigationMenuBaseComponent):
+    """Groups all parts of the navigation menu. Renders a <nav> element at the root, or <div> element when nested."""
+
+    tag = "NavigationMenu.Root"
+
+    # The controlled value of the navigation menu item that should be currently open. When non-nullish, the menu will be open. When nullish, the menu will be closed. To render an uncontrolled navigation menu, use the defaultValue prop instead.
+    value: Var[str]
+
+    # The uncontrolled value of the item that should be initially selected. To render a controlled navigation menu, use the value prop instead.
+    default_value: Var[str]
+
+    # Callback fired when the value changes.
+    on_value_change: EventHandler[passthrough_event_spec(str, dict)]
+
+    # The orientation of the navigation menu.
+    orientation: Var[LiteralNavigationMenuOrientation]
+
+    # How long to wait before opening the navigation menu. Specified in milliseconds. Defaults to 50.
+    delay: Var[int]
+
+    # How long to wait before closing the navigation menu. Specified in milliseconds. Defaults to 50.
+    close_delay: Var[int]
+
+    # Event handler called after any animations complete when the navigation menu is closed.
+    on_open_change_complete: EventHandler[passthrough_event_spec(bool)]
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the navigation menu root component."""
+        props["data-slot"] = "navigation-menu"
+        cls.set_class_name(ClassNames.ROOT, props)
+        return super().create(*children, **props)
+
+
+class NavigationMenuList(NavigationMenuBaseComponent):
+    """Contains a list of navigation menu items. Renders a <div> element."""
+
+    tag = "NavigationMenu.List"
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the navigation menu list component."""
+        props["data-slot"] = "navigation-menu-list"
+        cls.set_class_name(ClassNames.LIST, props)
+        return super().create(*children, **props)
+
+
+class NavigationMenuItem(NavigationMenuBaseComponent):
+    """An individual navigation menu item. Renders a <div> element."""
+
+    tag = "NavigationMenu.Item"
+
+    value: Var[str]
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the navigation menu item component."""
+        props["data-slot"] = "navigation-menu-item"
+        cls.set_class_name(ClassNames.ITEM, props)
+        return super().create(*children, **props)
+
+
+class NavigationMenuTrigger(NavigationMenuBaseComponent):
+    """Opens the navigation menu popup when hovered or clicked, revealing the associated content. Renders a <button> element."""
+
+    tag = "NavigationMenu.Trigger"
+
+    # Whether the component should ignore user interaction. Defaults to False.
+    disabled: Var[bool]
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the navigation menu trigger component."""
+        props["data-slot"] = "navigation-menu-trigger"
+        cls.set_class_name(ClassNames.TRIGGER, props)
+        return super().create(*children, **props)
+
+
+class NavigationMenuContent(NavigationMenuBaseComponent):
+    """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"
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the navigation menu content component."""
+        props["data-slot"] = "navigation-menu-content"
+        cls.set_class_name(ClassNames.CONTENT, props)
+        return super().create(*children, **props)
+
+
+class NavigationMenuLink(NavigationMenuBaseComponent):
+    """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"
+
+    active: Var[bool]
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the navigation menu link component."""
+        props["data-slot"] = "navigation-menu-link"
+        cls.set_class_name(ClassNames.LINK, props)
+        return super().create(*children, **props)
+
+
+class NavigationMenuIcon(NavigationMenuBaseComponent):
+    """An icon that indicates that the trigger button opens a menu. Renders a <span> element."""
+
+    tag = "NavigationMenu.Icon"
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the navigation menu icon component."""
+        props["data-slot"] = "navigation-menu-icon"
+        cls.set_class_name(ClassNames.ICON, props)
+        return super().create(*children, **props)
+
+
+class NavigationMenuPortal(NavigationMenuBaseComponent):
+    """A portal element that moves the content to a different part of the DOM."""
+
+    tag = "NavigationMenu.Portal"
+
+    # A parent element to render the portal element into.
+    container: Var[str]
+
+    # Whether to keep the portal mounted in the DOM while the content is hidden. Defaults to False.
+    keep_mounted: Var[bool]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the navigation menu portal component."""
+        props["data-slot"] = "navigation-menu-portal"
+        cls.set_class_name(ClassNames.PORTAL, props)
+        return super().create(*children, **props)
+
+
+class NavigationMenuPositioner(NavigationMenuBaseComponent):
+    """Positions the content against the trigger. Renders a <div> element."""
+
+    tag = "NavigationMenu.Positioner"
+
+    # Determines how to handle collisions when positioning the content.
+    collision_avoidance: Var[bool | LiteralCollisionAvoidance]
+
+    align: Var[LiteralAlign]
+
+    # Additional offset along the alignment axis in pixels. Defaults to 0.
+    align_offset: Var[int]
+
+    # Which side of the anchor element to align the content against. May automatically change to avoid collisions. Defaults to "bottom".
+    side: Var[LiteralSide]
+
+    # Distance between the anchor and the content in pixels. Defaults to 0.
+    side_offset: Var[int]
+
+    # Minimum distance to maintain between the arrow and the edges of the content. Use it to prevent the arrow element from hanging out of the rounded corners of a content. Defaults to 5.
+    arrow_padding: Var[int]
+
+    # Additional space to maintain from the edge of the collision boundary. Defaults to 5.
+    collision_padding: Var[int]
+
+    # An element or a rectangle that delimits the area that the content is confined to. Defaults to the "clipping-ancestors".
+    collision_boundary: Var[str]
+
+    sticky: Var[bool]
+
+    track_anchor: Var[bool]
+
+    # Determines which CSS position property to use. Defaults to "absolute".
+    position_method: Var[LiteralPositionMethod]
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the navigation menu positioner component."""
+        props["data-slot"] = "navigation-menu-positioner"
+        props.setdefault("side_offset", 10)
+        cls.set_class_name(ClassNames.POSITIONER, props)
+        return super().create(*children, **props)
+
+
+class NavigationMenuPopup(NavigationMenuBaseComponent):
+    """A container for the navigation menu content. Renders a <div> element."""
+
+    tag = "NavigationMenu.Popup"
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the navigation menu popup component."""
+        props["data-slot"] = "navigation-menu-popup"
+        cls.set_class_name(ClassNames.POPUP, props)
+        return super().create(*children, **props)
+
+
+class NavigationMenuViewport(NavigationMenuBaseComponent):
+    """An optional viewport element that masks the content when it overflows. Renders a <div> element."""
+
+    tag = "NavigationMenu.Viewport"
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the navigation menu viewport component."""
+        props["data-slot"] = "navigation-menu-viewport"
+        cls.set_class_name(ClassNames.VIEWPORT, props)
+        return super().create(*children, **props)
+
+
+class NavigationMenuArrow(NavigationMenuBaseComponent):
+    """Displays an element positioned against the navigation menu anchor. Renders a <div> element."""
+
+    tag = "NavigationMenu.Arrow"
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the navigation menu arrow component."""
+        props["data-slot"] = "navigation-menu-arrow"
+        cls.set_class_name(ClassNames.ARROW, props)
+        return super().create(*children, **props)
+
+
+class NavigationMenuBackdrop(NavigationMenuBaseComponent):
+    """An optional backdrop element that can be used to close the navigation menu. Renders a <div> element."""
+
+    tag = "NavigationMenu.Backdrop"
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the navigation menu backdrop component."""
+        props["data-slot"] = "navigation-menu-backdrop"
+        cls.set_class_name(ClassNames.BACKDROP, props)
+        return super().create(*children, **props)
+
+
+class NavigationMenu(ComponentNamespace):
+    """Namespace for NavigationMenu components."""
+
+    root = staticmethod(NavigationMenuRoot.create)
+    list = staticmethod(NavigationMenuList.create)
+    item = staticmethod(NavigationMenuItem.create)
+    trigger = staticmethod(NavigationMenuTrigger.create)
+    content = staticmethod(NavigationMenuContent.create)
+    link = staticmethod(NavigationMenuLink.create)
+    icon = staticmethod(NavigationMenuIcon.create)
+    portal = staticmethod(NavigationMenuPortal.create)
+    positioner = staticmethod(NavigationMenuPositioner.create)
+    popup = staticmethod(NavigationMenuPopup.create)
+    viewport = staticmethod(NavigationMenuViewport.create)
+    arrow = staticmethod(NavigationMenuArrow.create)
+    backdrop = staticmethod(NavigationMenuBackdrop.create)
+
+
+navigation_menu = NavigationMenu()
diff --git a/reflex_ui/components/base/navigation_menu.pyi b/reflex_ui/components/base/navigation_menu.pyi
new file mode 100644
index 0000000..05a65d6
--- /dev/null
+++ b/reflex_ui/components/base/navigation_menu.pyi
@@ -0,0 +1,637 @@
+"""Stub file for reflex_ui/components/base/navigation_menu.py"""
+
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+from collections.abc import Mapping, Sequence
+from typing import Any, Literal
+
+from reflex.components.component import Component, ComponentNamespace
+from reflex.components.core.breakpoints import Breakpoints
+from reflex.event import EventType, PointerEventInfo
+from reflex.vars.base import Var
+
+from reflex_ui.components.base_ui import BaseUIComponent
+
+LiteralNavigationMenuOrientation = Literal["horizontal", "vertical"]
+LiteralSide = Literal["top", "right", "bottom", "left"]
+LiteralAlign = Literal["start", "center", "end"]
+LiteralPositionMethod = Literal["absolute", "fixed"]
+LiteralCollisionAvoidance = Literal["flip", "shift", "auto"]
+
+class ClassNames:
+    ROOT = "min-w-max rounded-lg bg-secondary-1 p-1 text-secondary-12"
+    LIST = "relative flex"
+    ITEM = "relative"
+    TRIGGER = "box-border flex items-center justify-center gap-1.5 h-10 px-2 xs:px-3.5 m-0 rounded-md bg-secondary-1 text-secondary-12 font-medium text-[0.925rem] xs:text-base leading-6 select-none no-underline hover:bg-secondary-3 active:bg-secondary-3 data-[popup-open]:bg-secondary-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-4"
+    CONTENT = "w-max max-w-[calc(100vw-40px)] sm:max-w-[600px] p-6 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%]"
+    LINK = "block rounded-md p-2 xs:p-3 no-underline text-inherit hover:bg-secondary-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-4"
+    ICON = "transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180 text-secondary-10"
+    PORTAL = ""
+    POSITIONER = "box-border h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
+    POPUP = "relative h-[var(--popup-height)] w-max origin-[var(--transform-origin)] rounded-lg bg-secondary-1 text-secondary-12 shadow-large border border-secondary-a4 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 min-[500px]:w-[var(--popup-width)] xs:w-[var(--popup-width)]"
+    VIEWPORT = "relative h-full w-full overflow-hidden"
+    ARROW = "flex transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] 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"
+
+class NavigationMenuBaseComponent(BaseUIComponent):
+    @property
+    def import_var(self): ...
+    @classmethod
+    def create(
+        cls,
+        *children,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> NavigationMenuBaseComponent:
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            unstyled: Whether the component should be unstyled
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            ref: The Var to pass as the ref to the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props of the component.
+
+        Returns:
+            The component.
+        """
+
+class NavigationMenuRoot(NavigationMenuBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        value: Var[str] | str | None = None,
+        default_value: Var[str] | str | None = None,
+        orientation: Literal["horizontal", "vertical"]
+        | Var[Literal["horizontal", "vertical"]]
+        | None = None,
+        delay: Var[int] | int | None = None,
+        close_delay: Var[int] | int | None = None,
+        render_: Component | Var[Component] | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_open_change_complete: EventType[()] | EventType[bool] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        on_value_change: EventType[()]
+        | EventType[str]
+        | EventType[str, dict]
+        | None = None,
+        **props,
+    ) -> NavigationMenuRoot:
+        """Create the navigation menu root component."""
+
+class NavigationMenuList(NavigationMenuBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        render_: Component | Var[Component] | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> NavigationMenuList:
+        """Create the navigation menu list component."""
+
+class NavigationMenuItem(NavigationMenuBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        value: Var[str] | str | None = None,
+        render_: Component | Var[Component] | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> NavigationMenuItem:
+        """Create the navigation menu item component."""
+
+class NavigationMenuTrigger(NavigationMenuBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        disabled: Var[bool] | bool | None = None,
+        render_: Component | Var[Component] | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> NavigationMenuTrigger:
+        """Create the navigation menu trigger component."""
+
+class NavigationMenuContent(NavigationMenuBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        render_: Component | Var[Component] | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> NavigationMenuContent:
+        """Create the navigation menu content component."""
+
+class NavigationMenuLink(NavigationMenuBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        active: Var[bool] | bool | None = None,
+        render_: Component | Var[Component] | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> NavigationMenuLink:
+        """Create the navigation menu link component."""
+
+class NavigationMenuIcon(NavigationMenuBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        render_: Component | Var[Component] | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> NavigationMenuIcon:
+        """Create the navigation menu icon component."""
+
+class NavigationMenuPortal(NavigationMenuBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        container: Var[str] | str | None = None,
+        keep_mounted: Var[bool] | bool | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> NavigationMenuPortal:
+        """Create the navigation menu portal component."""
+
+class NavigationMenuPositioner(NavigationMenuBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        collision_avoidance: Literal["auto", "flip", "shift"]
+        | Var[Literal["auto", "flip", "shift"] | bool]
+        | bool
+        | None = None,
+        align: Literal["center", "end", "start"]
+        | Var[Literal["center", "end", "start"]]
+        | None = None,
+        align_offset: Var[int] | int | None = None,
+        side: Literal["bottom", "left", "right", "top"]
+        | Var[Literal["bottom", "left", "right", "top"]]
+        | None = None,
+        side_offset: Var[int] | int | None = None,
+        arrow_padding: Var[int] | int | None = None,
+        collision_padding: Var[int] | int | None = None,
+        collision_boundary: Var[str] | str | None = None,
+        sticky: Var[bool] | bool | None = None,
+        track_anchor: Var[bool] | bool | None = None,
+        position_method: Literal["absolute", "fixed"]
+        | Var[Literal["absolute", "fixed"]]
+        | None = None,
+        render_: Component | Var[Component] | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> NavigationMenuPositioner:
+        """Create the navigation menu positioner component."""
+
+class NavigationMenuPopup(NavigationMenuBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        render_: Component | Var[Component] | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> NavigationMenuPopup:
+        """Create the navigation menu popup component."""
+
+class NavigationMenuViewport(NavigationMenuBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        render_: Component | Var[Component] | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> NavigationMenuViewport:
+        """Create the navigation menu viewport component."""
+
+class NavigationMenuArrow(NavigationMenuBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        render_: Component | Var[Component] | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> NavigationMenuArrow:
+        """Create the navigation menu arrow component."""
+
+class NavigationMenuBackdrop(NavigationMenuBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        render_: Component | Var[Component] | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> NavigationMenuBackdrop:
+        """Create the navigation menu backdrop component."""
+
+class NavigationMenu(ComponentNamespace):
+    root = staticmethod(NavigationMenuRoot.create)
+    list = staticmethod(NavigationMenuList.create)
+    item = staticmethod(NavigationMenuItem.create)
+    trigger = staticmethod(NavigationMenuTrigger.create)
+    content = staticmethod(NavigationMenuContent.create)
+    link = staticmethod(NavigationMenuLink.create)
+    icon = staticmethod(NavigationMenuIcon.create)
+    portal = staticmethod(NavigationMenuPortal.create)
+    positioner = staticmethod(NavigationMenuPositioner.create)
+    popup = staticmethod(NavigationMenuPopup.create)
+    viewport = staticmethod(NavigationMenuViewport.create)
+    arrow = staticmethod(NavigationMenuArrow.create)
+    backdrop = staticmethod(NavigationMenuBackdrop.create)
+
+navigation_menu = NavigationMenu()
diff --git a/reflex_ui/components/icons/others.py b/reflex_ui/components/icons/others.py
index cb0668f..ce8713e 100644
--- a/reflex_ui/components/icons/others.py
+++ b/reflex_ui/components/icons/others.py
@@ -64,7 +64,7 @@ def select_arrow_icon(
 
 
 @memo
-def arrow_svg_component() -> Component:
+def arrow_svg_component(class_name: str | Var[str] = "") -> Component:
     """Create a tooltip arrow SVG icon.
 
     The arrow SVG icon.
@@ -72,7 +72,7 @@ def arrow_svg_component() -> Component:
     return svg(
         svg.path(
             d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V9H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
-            class_name="fill-secondary-12",
+            class_name=cn("fill-secondary-12", class_name),
         ),
         svg.path(
             d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
diff --git a/uv.lock b/uv.lock
index e44dd00..0ac1b13 100644
--- a/uv.lock
+++ b/uv.lock
@@ -502,7 +502,7 @@ wheels = [
 
 [[package]]
 name = "reflex"
-version = "0.8.1"
+version = "0.8.2"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "alembic" },
@@ -524,9 +524,9 @@ dependencies = [
     { name = "typing-extensions" },
     { name = "wrapt" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/85/e9/ce5aa6fd62f6395818d462be6f7c2cc25166ef2288bc3a8511a2b9b32f60/reflex-0.8.1.tar.gz", hash = "sha256:1cca988391e0ffee65ca9c66b46105b453f2909d42d7c0c31a76b9702d592a8c", size = 587511, upload-time = "2025-07-07T19:26:43.394Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/08/42/c314de5e0026836c04962a2f5f9024a32e36ae1ae741c2e447f4274e4cbd/reflex-0.8.2.tar.gz", hash = "sha256:de27bdc3ca73b154aba3da3b516e5d5f7849e749f537bda970a4e7e04e1bd1b4", size = 588802, upload-time = "2025-07-14T20:38:02.669Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/00/a2/66c293798c3002431907b8877276368bb9af5573720f33e1ba9c31ab3641/reflex-0.8.1-py3-none-any.whl", hash = "sha256:3b8c815d4b717f2cf0fc21c9fad92ee209ba7b8ae022465292f895b6fbe173ca", size = 882641, upload-time = "2025-07-07T19:26:41.445Z" },
+    { url = "https://files.pythonhosted.org/packages/eb/77/8a8a85a4444b98629eac4d91d9bca6cf7455c4983f0acba1b61a7be0a12b/reflex-0.8.2-py3-none-any.whl", hash = "sha256:a0ccaabacf12eed57fdb293654c5e7d7a2dd25f499e56f82fced01088393771e", size = 883732, upload-time = "2025-07-14T20:38:00.176Z" },
 ]
 
 [[package]]
@@ -562,7 +562,7 @@ dev = [
 ]
 
 [package.metadata]
-requires-dist = [{ name = "reflex", specifier = ">=0.8.1" }]
+requires-dist = [{ name = "reflex", specifier = ">=0.8.2" }]
 
 [package.metadata.requires-dev]
 dev = [