diff --git a/components/button/pure.js b/components/button/pure.js
index 768016a01..6157a754e 100644
--- a/components/button/pure.js
+++ b/components/button/pure.js
@@ -1,7 +1,7 @@
 import { html, nothing } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import { randomIdString } from "../utils/index.js";
+import { createElementId } from "../utils/index.js";
 
 /**
  * @param {object} options
@@ -28,7 +28,10 @@ export default function Button({
   variant = "primary",
   action,
 }) {
-  const labelId = randomIdString("label-");
+  const labelId = createElementId(
+    "label",
+    `${typeof label === "string" ? label : "btn"}-${href || ""}`,
+  );
   const iconElement = icon
     ? html`<span class="icon" part="icon">${icon}</span>`
     : nothing;
diff --git a/components/color-theme/element.js b/components/color-theme/element.js
index 40c517675..335fe564b 100644
--- a/components/color-theme/element.js
+++ b/components/color-theme/element.js
@@ -61,7 +61,7 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
 
   render() {
     return html`<div class="color-theme">
-      <mdn-dropdown>
+      <mdn-dropdown name="color-theme">
         <button
           part="button"
           slot="button"
diff --git a/components/dropdown/element.js b/components/dropdown/element.js
index d4f1bb98c..ea69b1ea5 100644
--- a/components/dropdown/element.js
+++ b/components/dropdown/element.js
@@ -1,6 +1,6 @@
 import { LitElement, html } from "lit";
 
-import { randomIdString } from "../utils/index.js";
+import { createElementId } from "../utils/index.js";
 
 import styles from "./element.css?lit";
 
@@ -13,6 +13,7 @@ import styles from "./element.css?lit";
  *
  * @element mdn-dropdown
  *
+ * @attr {string} name - Unique name used to generate a stable ID for the dropdown slot element (for aria-controls). Required when the dropdown slot element has no explicit id.
  * @attr {boolean} open - Whether the dropdown is open or not.
  *
  * @slot button - The element used to toggle the dropdown.
@@ -22,12 +23,14 @@ export class MDNDropdown extends LitElement {
   static styles = styles;
 
   static properties = {
+    name: { type: String, required: true },
     open: { type: Boolean },
     loaded: { type: Boolean, reflect: true },
   };
 
   constructor() {
     super();
+    this.name = "";
     this.open = false;
     this.loaded = false;
   }
@@ -70,7 +73,7 @@ export class MDNDropdown extends LitElement {
   _setAriaAttributes() {
     let id = this._dropdownSlotElements.find((element) => element.id)?.id;
     if (!id) {
-      id = randomIdString("uid_");
+      id = createElementId("dropdown", this.name);
       this._dropdownSlotElements[0]?.setAttribute("id", id);
     }
     for (const element of this._buttonSlotElements) {
diff --git a/components/interactive-example/with-choices.js b/components/interactive-example/with-choices.js
index 51ff10b56..7100e87b4 100644
--- a/components/interactive-example/with-choices.js
+++ b/components/interactive-example/with-choices.js
@@ -5,7 +5,7 @@ import { ref } from "lit/directives/ref.js";
 
 import { L10nMixin } from "../../l10n/mixin.js";
 import { MDNPlayEditor } from "../play-editor/element.js";
-import { randomIdString } from "../utils/index.js";
+import { createElementId } from "../utils/index.js";
 
 import { isCSSSupported } from "./utils.js";
 
@@ -111,7 +111,7 @@ export const InteractiveExampleWithChoices = (Base) =>
     }
 
     #render() {
-      const id = randomIdString();
+      const id = createElementId("ix-choices", this.name);
 
       return html`
         <div class="template-choices" aria-labelledby=${id}>
diff --git a/components/interactive-example/with-console.js b/components/interactive-example/with-console.js
index 9e658fa4e..dffad0e9c 100644
--- a/components/interactive-example/with-console.js
+++ b/components/interactive-example/with-console.js
@@ -11,7 +11,7 @@ import "../ix-tab/element.js";
 import "../ix-tab-panel/element.js";
 import "../ix-tab-wrapper/element.js";
 import { L10nMixin } from "../../l10n/mixin.js";
-import { randomIdString } from "../utils/index.js";
+import { createElementId } from "../utils/index.js";
 
 /**
  * @import { InteractiveExampleBase } from "./element.js";
@@ -24,7 +24,7 @@ import { randomIdString } from "../utils/index.js";
 export const InteractiveExampleWithConsole = (Base) =>
   class extends L10nMixin(Base) {
     #render() {
-      const id = randomIdString();
+      const id = createElementId("ix-console", this.name);
 
       return html`
         <mdn-play-controller ${ref(this._controller)}>
diff --git a/components/interactive-example/with-tabs.js b/components/interactive-example/with-tabs.js
index 6bd630038..ac7f7df81 100644
--- a/components/interactive-example/with-tabs.js
+++ b/components/interactive-example/with-tabs.js
@@ -9,7 +9,7 @@ import "../ix-tab/element.js";
 import "../ix-tab-panel/element.js";
 import "../ix-tab-wrapper/element.js";
 import { L10nMixin } from "../../l10n/mixin.js";
-import { randomIdString } from "../utils/index.js";
+import { createElementId } from "../utils/index.js";
 
 /**
  * @import { InteractiveExampleBase } from "./element.js";
@@ -22,7 +22,7 @@ import { randomIdString } from "../utils/index.js";
 export const InteractiveExampleWithTabs = (Base) =>
   class extends L10nMixin(Base) {
     #render() {
-      const id = randomIdString();
+      const id = createElementId("ix-tabbed", this.name);
 
       return html`
         <mdn-play-controller
diff --git a/components/language-switcher/element.js b/components/language-switcher/element.js
index 6058a8872..cf952bfd0 100644
--- a/components/language-switcher/element.js
+++ b/components/language-switcher/element.js
@@ -80,7 +80,7 @@ export class MDNLanguageSwitcher extends L10nMixin(LitElement) {
     }
 
     return html`<div class="language-switcher">
-      <mdn-dropdown>
+      <mdn-dropdown name="language-switcher">
         <button
           part="button"
           slot="button"
diff --git a/components/menu/server.js b/components/menu/server.js
index fb4cc6a05..6b6c40d1d 100644
--- a/components/menu/server.js
+++ b/components/menu/server.js
@@ -71,7 +71,7 @@ export class Menu extends ServerComponent {
                   data-glean-id=${`menu_click_link: top-level -> ${tab.href}`}
                   >${tab.buttonText}</a
                 >`
-              : html`<mdn-dropdown>
+              : html`<mdn-dropdown name=${`menu-${tab.id}`}>
                   <button class="menu__tab-button" type="button" slot="button">
                     ${typeof tab.buttonText === "string"
                       ? html`<span class="menu__tab-label"
diff --git a/components/observatory-results/rating.js b/components/observatory-results/rating.js
index f43b63320..a897eda70 100644
--- a/components/observatory-results/rating.js
+++ b/components/observatory-results/rating.js
@@ -22,7 +22,7 @@ export function Rating({ result, host, rescan }) {
     <section class="scan-result">
       <section class="grade-trend">
         <div class="overall">
-          <mdn-dropdown>
+          <mdn-dropdown name="observatory-results">
             <button
               slot="button"
               aria-label="show info tooltip"
diff --git a/components/user-menu/element.js b/components/user-menu/element.js
index ebfbac977..8113faba3 100644
--- a/components/user-menu/element.js
+++ b/components/user-menu/element.js
@@ -93,7 +93,7 @@ export class MDNUserMenu extends L10nMixin(LitElement) {
           return user.isAuthenticated
             ? html`
                 <div class="user-menu">
-                  <mdn-dropdown>
+                  <mdn-dropdown name="user-menu">
                     <button slot="button" class="user-menu__button">
                       ${user.avatarUrl
                         ? html`<img
diff --git a/components/utils/index.js b/components/utils/index.js
index f5e254d7c..7d45e5e31 100644
--- a/components/utils/index.js
+++ b/components/utils/index.js
@@ -1,9 +1,31 @@
 /**
- * Used to generate a random element id by combining a prefix with a random string.
+ * Simple FNV-1a hash implementation for generating deterministic IDs.
+ * @param {string} str - String to hash
+ * @returns {string} - Hexadecimal hash string
+ */
+function hashString(str) {
+  let hash = 2_166_136_261; // FNV offset basis
+  for (let i = 0; i < str.length; i++) {
+    // eslint-disable-next-line unicorn/prefer-code-point -- charCodeAt is sufficient for hash
+    hash ^= str.charCodeAt(i);
+    hash = Math.imul(hash, 16_777_619); // FNV prime
+  }
+  // Convert to unsigned 32-bit and then to hex
+  return (hash >>> 0).toString(36);
+}
+
+/**
+ * Used to generate a deterministic element id by hashing the provided content.
+ * Falls back to random generation if no content is provided (for backwards compatibility).
  *
- * @param {string} prefix
+ * @param {string} prefix - Prefix for the ID
+ * @param {string} content - Content to hash for ID generation
  * @returns {string}
  */
-export function randomIdString(prefix = "id-") {
-  return Math.random().toString(36).replace("0.", prefix);
+export function createElementId(prefix, content) {
+  if (!content) {
+    // Fallback to random for backwards compatibility when no content provided
+    return Math.random().toString(36).replace("0.", prefix);
+  }
+  return `${prefix}-${hashString(String(content))}`;
 }