Add custom menu item action JavaScript example

docs/customization/user-button.mdx

@@ -224,6 +224,79 @@ The following example demonstrates how to add an action, as well as a [custom pa
   </Tab>
 </Tabs>
 
+### JavaScript example
+
+To add custom menu items to the `<UserButton />` component using the [JavaScript SDK](/docs/references/javascript/overview), you can pass the `customMenuItems` property to the `mountUserButton` method, as shown in the following example:
+
+<CodeBlockTabs options={['NPM module', '<script>']}>
+  ```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: () => {
+          setModal(true) // your custom event
+        },
+        mountIcon: (el) => {
+          el.innerHTML = '👤'
+        },
+        unmountIcon: (el) => {},
+      },
+    ],
+  })
+  ```
+
+  ```html {{ filename: 'index.html' }}
+  <!-- Add a <div id="user-button"> element to your HTML -->
+  <div id="user-button"></div>
+
+  <!-- Initialize Clerk with your
+  Clerk Publishable key and Frontend API URL -->
+  <script
+    async
+    crossorigin="anonymous"
+    data-clerk-publishable-key="{{pub_key}}"
+    src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
+    type="text/javascript"
+  ></script>
+
+  <script>
+    window.addEventListener('load', async function () {
+      await Clerk.load()
+
+      const userButtonDiv = document.getElementById('user-button')
+
+      Clerk.mountUserButton(userButtonDiv, {
+        customMenuItems: [
+          {
+            label: 'Help modal',
+            onClick: () => {
+              setModal(true) // your custom event
+            },
+            mountIcon: (el) => {
+              el.innerHTML = '👤'
+            },
+            unmountIcon: (el) => {},
+          },
+        ],
+      })
+    })
+  </script>
+  ```
+</CodeBlockTabs>
+
 ## `<UserButton.Link>`
 
 Custom links can be rendered inside the `<UserButton />` component using the `<UserButton.Link />` component. This component is useful for adding links to custom pages or external URLs.