chore: Add custom menu items JavaScript example

docs/customization/user-button.mdx

@@ -318,6 +318,79 @@ The following example demonstrates how to add a link to the `<UserButton />` com
   </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: "User page",
+        href: "/user",
+        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: "User page",
+            href: "/user",
+            mountIcon: (el) => {
+              el.innerHTML = "👤";
+            },
+            unmountIcon: (el) => {
+            },
+          },
+        ],
+      })
+    })
+  </script>
+  ```
+</CodeBlockTabs>
+
+
 ## Reorder default items
 
 The `<UserButton />` component includes two default menu items: `Manage account` and `Sign out`. You can reorder these default items by setting the `label` prop to `'manageAccount'` or `'signOut'`. This will target the existing default item and allow you to rearrange it, as shown in the following example: