[Feature] Allow DropdownMenuItem to render as a div via as: (#427)

Add an `as:` option to `RubyUI::DropdownMenuItem` (default `:a`, option
`:div`) so an item can host its own interactive element (e.g. a dialog
or form trigger) without nesting a `<button>`/`<form>` inside the item's
`<a>` (invalid HTML and a keyboard/accessibility issue). The `:div`
variant keeps the menu-item styling, `role="menuitem"` and behavior, and
drops `href`. `href` is tied to the rendered element (set unless `:div`),
so an unexpected `as:` value still produces a valid `<a href>`.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: jacksonpires

docs/app/views/docs/dropdown_menu.rb

@@ -26,6 +26,33 @@ def view_template
         RUBY
       end
 
+      render Docs::VisualCodeExample.new(title: "Non-navigational item", description: "Use as: :div when the item hosts its own interactive element (e.g. a dialog or form trigger). This avoids nesting a <button>/<form> inside the item's <a> while keeping the menu-item styling, role and keyboard behavior.", context: self) do
+        <<~RUBY
+          DropdownMenu do
+            DropdownMenuTrigger(class: 'w-full') do
+              Button(variant: :outline) { "Open" }
+            end
+            DropdownMenuContent do
+              DropdownMenuItem(href: '#') { "Edit" }
+              DropdownMenuItem(as: :div) do
+                Dialog do
+                  DialogTrigger(class: 'w-full text-left') { "Delete" }
+                  DialogContent do
+                    DialogHeader do
+                      DialogTitle { "Are you absolutely sure?" }
+                      DialogDescription { "This action cannot be undone." }
+                    end
+                    DialogFooter do
+                      DialogClose { Button(variant: :destructive) { "Delete" } }
+                    end
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
       render Docs::VisualCodeExample.new(title: "Placement", description: "If the DropdownMenu conflicts with edge, it will auto-adjust it's placement", context: self) do
         <<~RUBY
           div(class: 'grid grid-cols-1 sm:grid-cols-3 gap-4') do

gem/lib/ruby_ui/dropdown_menu/dropdown_menu_item.rb

@@ -2,27 +2,33 @@
 
 module RubyUI
   class DropdownMenuItem < Base
-    def initialize(href: "#", **attrs)
+    def initialize(as: :a, href: "#", **attrs)
+      @as = as
       @href = href
       super(**attrs)
     end
 
     def view_template(&)
-      a(**attrs, &)
+      if @as == :div
+        div(**attrs, &)
+      else
+        a(**attrs, &)
+      end
     end
 
     private
 
     def default_attrs
-      {
-        href: @href,
+      base = {
         role: "menuitem",
         class: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         data_action: "click->ruby-ui--dropdown-menu#close",
         data_ruby_ui__dropdown_menu_target: "menuItem",
         tabindex: "-1",
         data_orientation: "vertical"
       }
+      base[:href] = @href unless @as == :div
+      base
     end
   end
 end

gem/test/ruby_ui/dropdown_menu_item_test.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class RubyUI::DropdownMenuItemTest < ComponentTest
+  def test_renders_as_anchor_by_default
+    output = phlex { RubyUI.DropdownMenuItem(href: "/edit") { "Edit" } }
+
+    assert_match(/\A<a/, output)
+    assert_match(/href="\/edit"/, output)
+    assert_match(/role="menuitem"/, output)
+    assert_match(/Edit/, output)
+  end
+
+  def test_renders_as_div_when_as_div_keeping_role_and_dropping_href
+    output = phlex { RubyUI.DropdownMenuItem(as: :div) { "Delete" } }
+
+    assert_match(/\A<div/, output)
+    assert_match(/role="menuitem"/, output)
+    assert_match(/Delete/, output)
+    refute_match(/<a[\s>]/, output)
+    refute_match(/href=/, output)
+  end
+
+  def test_unexpected_as_value_still_renders_an_anchor_with_href
+    output = phlex { RubyUI.DropdownMenuItem(as: :anchor, href: "/edit") { "Edit" } }
+
+    assert_match(/\A<a/, output)
+    assert_match(/href="\/edit"/, output)
+  end
+end

mcp/data/registry.json

@@ -1322,7 +1322,7 @@
         },
         {
           "path": "dropdown_menu_item.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class DropdownMenuItem < Base\n    def initialize(href: \"#\", **attrs)\n      @href = href\n      super(**attrs)\n    end\n\n    def view_template(&)\n      a(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        href: @href,\n        role: \"menuitem\",\n        class: \"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        data_action: \"click->ruby-ui--dropdown-menu#close\",\n        data_ruby_ui__dropdown_menu_target: \"menuItem\",\n        tabindex: \"-1\",\n        data_orientation: \"vertical\"\n      }\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class DropdownMenuItem < Base\n    def initialize(as: :a, href: \"#\", **attrs)\n      @as = as\n      @href = href\n      super(**attrs)\n    end\n\n    def view_template(&)\n      if @as == :div\n        div(**attrs, &)\n      else\n        a(**attrs, &)\n      end\n    end\n\n    private\n\n    def default_attrs\n      base = {\n        role: \"menuitem\",\n        class: \"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        data_action: \"click->ruby-ui--dropdown-menu#close\",\n        data_ruby_ui__dropdown_menu_target: \"menuItem\",\n        tabindex: \"-1\",\n        data_orientation: \"vertical\"\n      }\n      base[:href] = @href unless @as == :div\n      base\n    end\n  end\nend\n"
         },
         {
           "path": "dropdown_menu_label.rb",