Navigational menus that adapt between horizontal and vertical layouts are fragile to build from scratch—developers either hardcode separate components for each orientation, duplicate hover/click logic, or wrestle with CSS media queries that drift from the theme. Without a unified surface, teams end up rebuilding menu state management, keyboard focus rings, and dark-mode tokens across every app.

Menu is a compound component system with two orientation modes—vertical (accordion-style collapse) and horizontal (hover dropdowns)—and named subcomponents: Menu.Item (links or buttons with optional icon, badge, and active state), Menu.Submenu (collapsible section with automatic layout adaptation), and Menu.Group (labeled section wrapper). Each Menu.Item has stable data-react-fancy-menu-item handles and data-active attributes for agent navigation.

Import from @particle-academy/react-fancy, wrap items in <Menu orientation="vertical"><Menu.Item>Home</Menu.Item></Menu>, and nest submenus or groups inside. Set active={true} on the current item, use href to render links, and pass an icon ReactNode to add an icon. For agents, stable selectors like data-react-fancy-menu-item allow MCP bridges to read menu state and programmatically click items by handle.