customMenuItems not working

[sibbng]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://github.com/sibbng/clerk-javascript-quickstart

Publishable key

pk_test_cGF0aWVudC1idWxsZG9nLTY2LmNsZXJrLmFjY291bnRzLmRldiQ

Description

Steps to reproduce:

1. pnpm i
2. pnpm dev

Expected behavior:

Have a custom menu item with Hello text

Actual behavior:

No custom menu items show up

Environment

-

[nikospapcom]

Hey @sibbng and sorry for the late reply
I clone your repo and I was able to see that custom menu didn't work as expected
You should define mountIcon and unmountIcon props along with menu action, e.g. href or onClick
can you try the following?

customMenuItems: [
  {
    label: "Hello",
    href: "/user",
    mountIcon: (el) => {
      el.innerHTML = "👋";
    },
    unmountIcon: (el) => {
    },
  },
],

by adding the following you will see the following custom menu item:

Feel free to ask anything if you have more questions regarding custom menu items

[sibbng]

Yeah, it works that way. Since these properties are marked as optional in the type definitions, I thought it would work with just the label. Also, the documentation lacks an example of this. User profiles and organization profiles have examples of customPages usage, but I couldn't find an example of customMenuItems in the docs. Closing for now as it's not a bug.

[nikospapcom]

@sibbng thanks for pointing this out, we'll update our docs with some JavaScript examples 🙏