diff --git a/templates/repo/issue/view_content/context_menu.tmpl b/templates/repo/issue/view_content/context_menu.tmpl
index 749a2fa0ddc0f..e1108e3b5c554 100644
--- a/templates/repo/issue/view_content/context_menu.tmpl
+++ b/templates/repo/issue/view_content/context_menu.tmpl
@@ -1,4 +1,4 @@
-<div class="item action ui dropdown jump pointing top right context-dropdown">
+<fomantic-dropdown class="item action ui dropdown jump pointing top right context-dropdown">
 	<a class="context-menu muted">
 		{{svg "octicon-kebab-horizontal"}}
 	</a>
@@ -41,4 +41,4 @@
 			{{end}}
 		{{end}}
 	</div>
-</div>
+</fomantic-dropdown>
diff --git a/web_src/js/webcomponents/fomantic-dropdown.ts b/web_src/js/webcomponents/fomantic-dropdown.ts
new file mode 100644
index 0000000000000..b34abb2e514fe
--- /dev/null
+++ b/web_src/js/webcomponents/fomantic-dropdown.ts
@@ -0,0 +1,20 @@
+/**
+ * Dropdown web component.
+ *
+ * This component wraps a Fomantic UI dropdown, allowing you to apply the same
+ * classes and attributes as you would with a standard Fomantic dropdown.
+ *
+ * It ensures automatic initialization when connected to the DOM, which is useful
+ * for dynamically added elements, eliminating the need for manual initialization.
+ */
+class FomanticDropdown extends HTMLElement {
+  connectedCallback() {
+    if (window.jQuery) {
+      window.$(this).dropdown();
+    }
+        // note: if jquery is not defined then this component was part of the initial page load and
+        // will be initialized by the fomantic-ui js
+  }
+}
+
+customElements.define('fomantic-dropdown', FomanticDropdown);
diff --git a/web_src/js/webcomponents/index.ts b/web_src/js/webcomponents/index.ts
index 6c0f5558648a8..55d975365d3bf 100644
--- a/web_src/js/webcomponents/index.ts
+++ b/web_src/js/webcomponents/index.ts
@@ -3,3 +3,4 @@ import '@github/relative-time-element';
 import './origin-url.ts';
 import './overflow-menu.ts';
 import './absolute-date.ts';
+import './fomantic-dropdown.ts';