How to pass a <button> element (with an id) to menu_item in shell component instead of a link?

[amrutadotorg]

❓ How to pass a element (with an id) to menu_item in shell component instead of a link?

Hi,
I’m currently working with the shell component, and I’d like to use a custom

(e.g., with an id="installBtn") as a menu_item, instead of passing a regular link.

💡 Goal

I want to have the menu item render a

with a specific ID so that it can be hooked by JavaScript later (e.g., to trigger an install prompt for a PWA).

⚠️ Current workaround

Right now, I generate the button using a separate SQL file that includes raw HTML. Here’s what I’m doing:

select 
    'html' as component,
    '<div class="d-flex justify-content-center mb-4">' as html;

-- Custom button with icon and ID
select 
    '<button id="installBtn" class="btn btn-primary btn-lg shadow-sm d-flex align-items-center gap-3" style="padding: 12px 24px; font-weight: 600;">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
            <polyline points="7 10 12 15 17 10"></polyline>
            <line x1="12" y1="15" x2="12" y2="3"></line>
        </svg>
        Install Sahaja Yoga App
    </button>' as html;

📌 Question

Is there a way to avoid using an external SQL file for this and still have a menu_item behave like a button (not a link), so I can bind JavaScript to it directly (e.g., document.getElementById("installBtn").addEventListener(...))?

Any suggestions or recommended approaches?

Thanks in advance! 🙏

[lovasoa]

Hi !
SQLPage does not allow you to insert arbitrary elements as menu items without creating your own shell as a custom component.

But in your case, it sounds like you don't need it. You can create a normal menu item with

select 
    'shell' as component,
    JSON('{"link":"#xxx","title":"Install","icon":"download"}') as menu_item;

and then select it from your javascript with

document.querySelector("nav a[href='#xxx']") 

[amrutadotorg]

thank you, works like a charm