chore: Add JavaScript example for custom menu items in <UserButton /> (…

…#1650)

Co-authored-by: Alexis Aguilar <[email protected]>

docs/customization/user-button.mdx

@@ -57,7 +57,7 @@ The `<UserButton />` component must be wrapped in a `<UserButton.MenuItems />` c
 
 The following example demonstrates how to add an action to the `<UserButton />` component.
 
-<Tabs items={["Next.js", "Astro"]}>
+<Tabs items={["Next.js", "Astro", "JavaScript"]}>
   <Tab>
     ```tsx filename="/app/page.tsx"
     'use client'
@@ -139,6 +139,39 @@ The following example demonstrates how to add an action to the `<UserButton />`
     </script>
     ```
   </Tab>
+
+  <Tab>
+    To add custom menu items to the `<UserButton />` component using the [JavaScript SDK](/docs/references/javascript/overview), pass the `customMenuItems` property to the `mountUserButton()` method, as shown in the following example:
+
+    ```js {{ filename: 'main.js' }}
+    import { Clerk } from '@clerk/clerk-js'
+
+    // Initialize Clerk with your Clerk publishable key
+    const clerk = new Clerk('{{pub_key}}')
+    await clerk.load()
+
+    document.getElementById('app').innerHTML = `
+      <div id="user-button"></div>
+    `
+
+    const userButtonDiv = document.getElementById('user-button')
+
+    clerk.mountUserButton(userButtonDiv, {
+      customMenuItems: [
+        {
+          label: 'Help modal',
+          onClick: () => {
+            alert('Open modal') // your custom event
+          },
+          mountIcon: (el) => {
+            el.innerHTML = '👤'
+          },
+          unmountIcon: (el) => {},
+        },
+      ],
+    })
+    ```
+  </Tab>
 </Tabs>
 
 The following example demonstrates how to add an action, as well as a [custom page](/docs/customization/user-profile), to the `<UserButton />` component.
@@ -259,7 +292,7 @@ The `<UserButton />` component must be wrapped in a `<UserButton.MenuItems />` c
 
 The following example demonstrates how to add a link to the `<UserButton />` component.
 
-<Tabs items={["Next.js", "Astro"]}>
+<Tabs items={["Next.js", "Astro", "JavaScript"]}>
   <Tab>
     ```tsx filename="/app/page.tsx"
     'use client'
@@ -316,6 +349,37 @@ The following example demonstrates how to add a link to the `<UserButton />` com
     </header>
     ```
   </Tab>
+
+  <Tab>
+    To add custom menu items to the `<UserButton />` component using the [JavaScript SDK](/docs/references/javascript/overview), pass the `customMenuItems` property to the `mountUserButton()` method, as shown in the following example:
+
+    ```js {{ filename: 'main.js' }}
+    import { Clerk } from '@clerk/clerk-js'
+
+    // Initialize Clerk with your Clerk publishable key
+    const clerk = new Clerk('{{pub_key}}')
+    await clerk.load()
+
+    document.getElementById('app').innerHTML = `
+      <div id="user-button"></div>
+    `
+
+    const userButtonDiv = document.getElementById('user-button')
+
+    clerk.mountUserButton(userButtonDiv, {
+      customMenuItems: [
+        {
+          label: 'User page',
+          href: '/user',
+          mountIcon: (el) => {
+            el.innerHTML = '👤'
+          },
+          unmountIcon: (el) => {},
+        },
+      ],
+    })
+    ```
+  </Tab>
 </Tabs>
 
 ## Reorder default items