From e6b6b5b9f3a7c51c6f55c3141136d980b29fc680 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Djalma=20Ara=C3=BAjo?= <djalma@nossomos.cc>
Date: Tue, 23 Jun 2026 16:21:41 -0300
Subject: [PATCH 1/2] [Bug Fix] DropdownMenu: fix z-index stacking and default
 placement (#439)

- Default placement changed from `top` to `bottom` so menus open below
  their trigger (matches dropdown convention).
- Removed the static `z-50` from the DropdownMenu container; the controller
  now sets z-index only while open, so closed sibling dropdowns no longer
  cover an open menu (they share the same z-50 and DOM order decided paint
  order).
- Dropped `w-full` from the Usage demo trigger so the floating reference
  matches the visible button instead of a full-width wrapper.
---
 .../controllers/ruby_ui/dropdown_menu_controller.js         | 6 +++++-
 docs/app/views/docs/dropdown_menu.rb                        | 4 ++--
 gem/lib/ruby_ui/dropdown_menu/dropdown_menu.rb              | 1 -
 gem/lib/ruby_ui/dropdown_menu/dropdown_menu_controller.js   | 6 +++++-
 gem/lib/ruby_ui/dropdown_menu/dropdown_menu_docs.rb         | 2 +-
 5 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/docs/app/javascript/controllers/ruby_ui/dropdown_menu_controller.js b/docs/app/javascript/controllers/ruby_ui/dropdown_menu_controller.js
index d624eaf5b..6479c8442 100644
--- a/docs/app/javascript/controllers/ruby_ui/dropdown_menu_controller.js
+++ b/docs/app/javascript/controllers/ruby_ui/dropdown_menu_controller.js
@@ -43,7 +43,7 @@ export default class extends Controller {
 
   #computeTooltip() {
     computePosition(this.triggerTarget, this.contentTarget, {
-      placement: this.optionsValue.placement || "top",
+      placement: this.optionsValue.placement || "bottom",
       middleware: [flip(), shift(), offset(8)],
       strategy: this.optionsValue.strategy || "absolute",
     }).then(({ x, y }) => {
@@ -73,12 +73,16 @@ export default class extends Controller {
     this.#deselectAll();
     this.#addEventListeners();
     this.#computeTooltip();
+    // Lift the open menu above sibling dropdowns/elements. The container has no
+    // static z-index, so closed siblings stack in normal flow and never cover it.
+    this.element.style.zIndex = "50";
     this.contentTarget.classList.remove("hidden");
   }
 
   close() {
     this.openValue = false;
     this.#removeEventListeners();
+    this.element.style.zIndex = "";
     this.contentTarget.classList.add("hidden");
   }
 
diff --git a/docs/app/views/docs/dropdown_menu.rb b/docs/app/views/docs/dropdown_menu.rb
index effa942b2..4588a301c 100644
--- a/docs/app/views/docs/dropdown_menu.rb
+++ b/docs/app/views/docs/dropdown_menu.rb
@@ -11,7 +11,7 @@ def view_template
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
           DropdownMenu do
-            DropdownMenuTrigger(class: 'w-full') do
+            DropdownMenuTrigger do
               Button(variant: :outline) { "Open" }
             end
             DropdownMenuContent do
@@ -29,7 +29,7 @@ def view_template
       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
+            DropdownMenuTrigger do
               Button(variant: :outline) { "Open" }
             end
             DropdownMenuContent do
diff --git a/gem/lib/ruby_ui/dropdown_menu/dropdown_menu.rb b/gem/lib/ruby_ui/dropdown_menu/dropdown_menu.rb
index 628d167f2..56d92ed6a 100644
--- a/gem/lib/ruby_ui/dropdown_menu/dropdown_menu.rb
+++ b/gem/lib/ruby_ui/dropdown_menu/dropdown_menu.rb
@@ -16,7 +16,6 @@ def view_template(&)
     def default_attrs
       {
         class: [
-          "z-50",
           "group/dropdown-menu",
           (strategy == "absolute") ? "is-absolute" : "is-fixed"
         ],
diff --git a/gem/lib/ruby_ui/dropdown_menu/dropdown_menu_controller.js b/gem/lib/ruby_ui/dropdown_menu/dropdown_menu_controller.js
index d624eaf5b..6479c8442 100644
--- a/gem/lib/ruby_ui/dropdown_menu/dropdown_menu_controller.js
+++ b/gem/lib/ruby_ui/dropdown_menu/dropdown_menu_controller.js
@@ -43,7 +43,7 @@ export default class extends Controller {
 
   #computeTooltip() {
     computePosition(this.triggerTarget, this.contentTarget, {
-      placement: this.optionsValue.placement || "top",
+      placement: this.optionsValue.placement || "bottom",
       middleware: [flip(), shift(), offset(8)],
       strategy: this.optionsValue.strategy || "absolute",
     }).then(({ x, y }) => {
@@ -73,12 +73,16 @@ export default class extends Controller {
     this.#deselectAll();
     this.#addEventListeners();
     this.#computeTooltip();
+    // Lift the open menu above sibling dropdowns/elements. The container has no
+    // static z-index, so closed siblings stack in normal flow and never cover it.
+    this.element.style.zIndex = "50";
     this.contentTarget.classList.remove("hidden");
   }
 
   close() {
     this.openValue = false;
     this.#removeEventListeners();
+    this.element.style.zIndex = "";
     this.contentTarget.classList.add("hidden");
   }
 
diff --git a/gem/lib/ruby_ui/dropdown_menu/dropdown_menu_docs.rb b/gem/lib/ruby_ui/dropdown_menu/dropdown_menu_docs.rb
index a57469e27..9316bdb91 100644
--- a/gem/lib/ruby_ui/dropdown_menu/dropdown_menu_docs.rb
+++ b/gem/lib/ruby_ui/dropdown_menu/dropdown_menu_docs.rb
@@ -11,7 +11,7 @@ def view_template
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
           DropdownMenu do
-            DropdownMenuTrigger(class: 'w-full') do
+            DropdownMenuTrigger do
               Button(variant: :outline) { "Open" }
             end
             DropdownMenuContent do

From 9c4be6c6ac341013e37b1c63cceb9b017b54a425 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Djalma=20Ara=C3=BAjo?= <djalma@nossomos.cc>
Date: Tue, 23 Jun 2026 16:39:47 -0300
Subject: [PATCH 2/2] [Bug Fix] Rebuild MCP registry for DropdownMenu changes
 (#439)

---
 mcp/data/registry.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/mcp/data/registry.json b/mcp/data/registry.json
index 91af6b2be..6a70a8db5 100644
--- a/mcp/data/registry.json
+++ b/mcp/data/registry.json
@@ -1310,7 +1310,7 @@
       "files": [
         {
           "path": "dropdown_menu.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class DropdownMenu < Base\n    def initialize(options: {}, **attrs)\n      @options = options\n      super(**attrs)\n    end\n\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        class: [\n          \"z-50\",\n          \"group/dropdown-menu\",\n          (strategy == \"absolute\") ? \"is-absolute\" : \"is-fixed\"\n        ],\n        data: {\n          controller: \"ruby-ui--dropdown-menu\",\n          action: \"click@window->ruby-ui--dropdown-menu#onClickOutside\",\n          ruby_ui__dropdown_menu_options_value: @options.to_json\n        }\n      }\n    end\n\n    def strategy\n      @_strategy ||= @options[:strategy] || \"absolute\"\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class DropdownMenu < Base\n    def initialize(options: {}, **attrs)\n      @options = options\n      super(**attrs)\n    end\n\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        class: [\n          \"group/dropdown-menu\",\n          (strategy == \"absolute\") ? \"is-absolute\" : \"is-fixed\"\n        ],\n        data: {\n          controller: \"ruby-ui--dropdown-menu\",\n          action: \"click@window->ruby-ui--dropdown-menu#onClickOutside\",\n          ruby_ui__dropdown_menu_options_value: @options.to_json\n        }\n      }\n    end\n\n    def strategy\n      @_strategy ||= @options[:strategy] || \"absolute\"\n    end\n  end\nend\n"
         },
         {
           "path": "dropdown_menu_content.rb",
@@ -1318,7 +1318,7 @@
         },
         {
           "path": "dropdown_menu_controller.js",
-          "content": "import { Controller } from \"@hotwired/stimulus\";\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  autoUpdate,\n} from \"@floating-ui/dom\";\n\nexport default class extends Controller {\n  static targets = [\"trigger\", \"content\", \"menuItem\"];\n  static values = {\n    open: {\n      type: Boolean,\n      default: false,\n    },\n    options: {\n      type: Object,\n      default: {},\n    },\n  };\n\n  connect() {\n    this.boundHandleKeydown = this.#handleKeydown.bind(this); // Bind the function so we can remove it later\n    this.selectedIndex = -1;\n\n    this.#setupAutoUpdate();\n  }\n\n  disconnect() {\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n  }\n\n  #setupAutoUpdate() {\n    this.autoUpdateCleanup = autoUpdate(\n      this.triggerTarget,\n      this.contentTarget,\n      this.#computeTooltip.bind(this),\n    );\n  }\n\n  #computeTooltip() {\n    computePosition(this.triggerTarget, this.contentTarget, {\n      placement: this.optionsValue.placement || \"top\",\n      middleware: [flip(), shift(), offset(8)],\n      strategy: this.optionsValue.strategy || \"absolute\",\n    }).then(({ x, y }) => {\n      Object.assign(this.contentTarget.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n    });\n  }\n\n  onClickOutside(event) {\n    if (!this.openValue) return;\n    if (this.element.contains(event.target)) return;\n\n    event.preventDefault();\n    this.close();\n  }\n\n  toggle() {\n    this.contentTarget.classList.contains(\"hidden\")\n      ? this.#open()\n      : this.close();\n  }\n\n  #open() {\n    this.openValue = true;\n    this.#deselectAll();\n    this.#addEventListeners();\n    this.#computeTooltip();\n    this.contentTarget.classList.remove(\"hidden\");\n  }\n\n  close() {\n    this.openValue = false;\n    this.#removeEventListeners();\n    this.contentTarget.classList.add(\"hidden\");\n  }\n\n  #handleKeydown(e) {\n    // return if no menu items (one line fix for)\n    if (this.menuItemTargets.length === 0) {\n      return;\n    }\n\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      this.#updateSelectedItem(1);\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      this.#updateSelectedItem(-1);\n    } else if (e.key === \"Enter\" && this.selectedIndex !== -1) {\n      e.preventDefault();\n      this.menuItemTargets[this.selectedIndex].click();\n    }\n  }\n\n  #updateSelectedItem(direction) {\n    // Check if any of the menuItemTargets have aria-selected=\"true\" and set the selectedIndex to that index\n    this.menuItemTargets.forEach((item, index) => {\n      if (item.getAttribute(\"aria-selected\") === \"true\") {\n        this.selectedIndex = index;\n      }\n    });\n\n    if (this.selectedIndex >= 0) {\n      this.#toggleAriaSelected(this.menuItemTargets[this.selectedIndex], false);\n    }\n\n    this.selectedIndex += direction;\n\n    if (this.selectedIndex < 0) {\n      this.selectedIndex = this.menuItemTargets.length - 1;\n    } else if (this.selectedIndex >= this.menuItemTargets.length) {\n      this.selectedIndex = 0;\n    }\n\n    this.#toggleAriaSelected(this.menuItemTargets[this.selectedIndex], true);\n  }\n\n  #toggleAriaSelected(element, isSelected) {\n    // Add or remove attribute\n    if (isSelected) {\n      element.setAttribute(\"aria-selected\", \"true\");\n    } else {\n      element.removeAttribute(\"aria-selected\");\n    }\n  }\n\n  #deselectAll() {\n    this.menuItemTargets.forEach((item) =>\n      this.#toggleAriaSelected(item, false),\n    );\n    this.selectedIndex = -1;\n  }\n\n  #addEventListeners() {\n    document.addEventListener(\"keydown\", this.boundHandleKeydown);\n  }\n\n  #removeEventListeners() {\n    document.removeEventListener(\"keydown\", this.boundHandleKeydown);\n  }\n}\n"
+          "content": "import { Controller } from \"@hotwired/stimulus\";\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  autoUpdate,\n} from \"@floating-ui/dom\";\n\nexport default class extends Controller {\n  static targets = [\"trigger\", \"content\", \"menuItem\"];\n  static values = {\n    open: {\n      type: Boolean,\n      default: false,\n    },\n    options: {\n      type: Object,\n      default: {},\n    },\n  };\n\n  connect() {\n    this.boundHandleKeydown = this.#handleKeydown.bind(this); // Bind the function so we can remove it later\n    this.selectedIndex = -1;\n\n    this.#setupAutoUpdate();\n  }\n\n  disconnect() {\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n  }\n\n  #setupAutoUpdate() {\n    this.autoUpdateCleanup = autoUpdate(\n      this.triggerTarget,\n      this.contentTarget,\n      this.#computeTooltip.bind(this),\n    );\n  }\n\n  #computeTooltip() {\n    computePosition(this.triggerTarget, this.contentTarget, {\n      placement: this.optionsValue.placement || \"bottom\",\n      middleware: [flip(), shift(), offset(8)],\n      strategy: this.optionsValue.strategy || \"absolute\",\n    }).then(({ x, y }) => {\n      Object.assign(this.contentTarget.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n    });\n  }\n\n  onClickOutside(event) {\n    if (!this.openValue) return;\n    if (this.element.contains(event.target)) return;\n\n    event.preventDefault();\n    this.close();\n  }\n\n  toggle() {\n    this.contentTarget.classList.contains(\"hidden\")\n      ? this.#open()\n      : this.close();\n  }\n\n  #open() {\n    this.openValue = true;\n    this.#deselectAll();\n    this.#addEventListeners();\n    this.#computeTooltip();\n    // Lift the open menu above sibling dropdowns/elements. The container has no\n    // static z-index, so closed siblings stack in normal flow and never cover it.\n    this.element.style.zIndex = \"50\";\n    this.contentTarget.classList.remove(\"hidden\");\n  }\n\n  close() {\n    this.openValue = false;\n    this.#removeEventListeners();\n    this.element.style.zIndex = \"\";\n    this.contentTarget.classList.add(\"hidden\");\n  }\n\n  #handleKeydown(e) {\n    // return if no menu items (one line fix for)\n    if (this.menuItemTargets.length === 0) {\n      return;\n    }\n\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      this.#updateSelectedItem(1);\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      this.#updateSelectedItem(-1);\n    } else if (e.key === \"Enter\" && this.selectedIndex !== -1) {\n      e.preventDefault();\n      this.menuItemTargets[this.selectedIndex].click();\n    }\n  }\n\n  #updateSelectedItem(direction) {\n    // Check if any of the menuItemTargets have aria-selected=\"true\" and set the selectedIndex to that index\n    this.menuItemTargets.forEach((item, index) => {\n      if (item.getAttribute(\"aria-selected\") === \"true\") {\n        this.selectedIndex = index;\n      }\n    });\n\n    if (this.selectedIndex >= 0) {\n      this.#toggleAriaSelected(this.menuItemTargets[this.selectedIndex], false);\n    }\n\n    this.selectedIndex += direction;\n\n    if (this.selectedIndex < 0) {\n      this.selectedIndex = this.menuItemTargets.length - 1;\n    } else if (this.selectedIndex >= this.menuItemTargets.length) {\n      this.selectedIndex = 0;\n    }\n\n    this.#toggleAriaSelected(this.menuItemTargets[this.selectedIndex], true);\n  }\n\n  #toggleAriaSelected(element, isSelected) {\n    // Add or remove attribute\n    if (isSelected) {\n      element.setAttribute(\"aria-selected\", \"true\");\n    } else {\n      element.removeAttribute(\"aria-selected\");\n    }\n  }\n\n  #deselectAll() {\n    this.menuItemTargets.forEach((item) =>\n      this.#toggleAriaSelected(item, false),\n    );\n    this.selectedIndex = -1;\n  }\n\n  #addEventListeners() {\n    document.addEventListener(\"keydown\", this.boundHandleKeydown);\n  }\n\n  #removeEventListeners() {\n    document.removeEventListener(\"keydown\", this.boundHandleKeydown);\n  }\n}\n"
         },
         {
           "path": "dropdown_menu_item.rb",
@@ -1345,11 +1345,11 @@
         "gems": []
       },
       "install_command": "rails g ruby_ui:component DropdownMenu",
-      "docs_markdown": "# Dropdown Menu\n\nDisplays a menu to the user — such as a set of actions or functions — triggered by a button.\n\n## Usage\n\n### Example\n\n```ruby\nDropdownMenu do\n  DropdownMenuTrigger(class: 'w-full') do\n    Button(variant: :outline) { \"Open\" }\n  end\n  DropdownMenuContent do\n    DropdownMenuLabel { \"My Account\" }\n    DropdownMenuSeparator\n    DropdownMenuItem(href: '#') { \"Profile\" }\n    DropdownMenuItem(href: '#') { \"Billing\" }\n    DropdownMenuItem(href: '#') { \"Team\" }\n    DropdownMenuItem(href: '#') { \"Subscription\" }\n  end\nend\n```\n\n### Placement\n\n```ruby\ndiv(class: 'grid grid-cols-1 sm:grid-cols-3 gap-4') do\n  # -- TOP --\n  DropdownMenu(options: { placement: 'top' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'top' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  DropdownMenu(options: { placement: 'top-start' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'top-start' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  DropdownMenu(options: { placement: 'top-end' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'top-end' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  # -- BOTTOM --\n  DropdownMenu(options: { placement: 'bottom' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'bottom' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  DropdownMenu(options: { placement: 'bottom-start' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'bottom-start' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  DropdownMenu(options: { placement: 'bottom-end' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'bottom-end' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  # -- LEFT --\n  DropdownMenu(options: { placement: 'left' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'left' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  DropdownMenu(options: { placement: 'left-start' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'left-start' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  DropdownMenu(options: { placement: 'left-end' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'left-end' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  # -- RIGHT --\n  DropdownMenu(options: { placement: 'right' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'right' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  DropdownMenu(options: { placement: 'right-start' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'right-start' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  DropdownMenu(options: { placement: 'right-end' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'right-end' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\nend\n```",
+      "docs_markdown": "# Dropdown Menu\n\nDisplays a menu to the user — such as a set of actions or functions — triggered by a button.\n\n## Usage\n\n### Example\n\n```ruby\nDropdownMenu do\n  DropdownMenuTrigger do\n    Button(variant: :outline) { \"Open\" }\n  end\n  DropdownMenuContent do\n    DropdownMenuLabel { \"My Account\" }\n    DropdownMenuSeparator\n    DropdownMenuItem(href: '#') { \"Profile\" }\n    DropdownMenuItem(href: '#') { \"Billing\" }\n    DropdownMenuItem(href: '#') { \"Team\" }\n    DropdownMenuItem(href: '#') { \"Subscription\" }\n  end\nend\n```\n\n### Placement\n\n```ruby\ndiv(class: 'grid grid-cols-1 sm:grid-cols-3 gap-4') do\n  # -- TOP --\n  DropdownMenu(options: { placement: 'top' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'top' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  DropdownMenu(options: { placement: 'top-start' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'top-start' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  DropdownMenu(options: { placement: 'top-end' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'top-end' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  # -- BOTTOM --\n  DropdownMenu(options: { placement: 'bottom' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'bottom' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  DropdownMenu(options: { placement: 'bottom-start' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'bottom-start' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  DropdownMenu(options: { placement: 'bottom-end' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'bottom-end' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  # -- LEFT --\n  DropdownMenu(options: { placement: 'left' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'left' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  DropdownMenu(options: { placement: 'left-start' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'left-start' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  DropdownMenu(options: { placement: 'left-end' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'left-end' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  # -- RIGHT --\n  DropdownMenu(options: { placement: 'right' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'right' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  DropdownMenu(options: { placement: 'right-start' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'right-start' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\n\n  DropdownMenu(options: { placement: 'right-end' }) do\n    DropdownMenuTrigger(class: 'w-full') do\n      Button(variant: :outline, class: 'w-full justify-center') { 'right-end' }\n    end\n    DropdownMenuContent do\n      DropdownMenuLabel { \"My Account\" }\n      DropdownMenuSeparator\n      DropdownMenuItem(href: '#') { \"Profile\" }\n      DropdownMenuItem(href: '#') { \"Billing\" }\n      DropdownMenuItem(href: '#') { \"Team\" }\n      DropdownMenuItem(href: '#') { \"Subscription\" }\n    end\n  end\nend\n```",
       "examples": [
         {
           "title": "Example",
-          "code": "DropdownMenu do\n  DropdownMenuTrigger(class: 'w-full') do\n    Button(variant: :outline) { \"Open\" }\n  end\n  DropdownMenuContent do\n    DropdownMenuLabel { \"My Account\" }\n    DropdownMenuSeparator\n    DropdownMenuItem(href: '#') { \"Profile\" }\n    DropdownMenuItem(href: '#') { \"Billing\" }\n    DropdownMenuItem(href: '#') { \"Team\" }\n    DropdownMenuItem(href: '#') { \"Subscription\" }\n  end\nend\n",
+          "code": "DropdownMenu do\n  DropdownMenuTrigger do\n    Button(variant: :outline) { \"Open\" }\n  end\n  DropdownMenuContent do\n    DropdownMenuLabel { \"My Account\" }\n    DropdownMenuSeparator\n    DropdownMenuItem(href: '#') { \"Profile\" }\n    DropdownMenuItem(href: '#') { \"Billing\" }\n    DropdownMenuItem(href: '#') { \"Team\" }\n    DropdownMenuItem(href: '#') { \"Subscription\" }\n  end\nend\n",
           "language": "ruby"
         },
         {