Add external link to page menu

[Harry]

I’ve found a way of adding external links to the main header and thought I’d share

1. Add a new page to your Knack app and on the page settings change the name to the following:

<a href="[PUT YOUR LINK HERE]" target="_blank"> TEXT HERE </a>

So for example, my link is to the Productive website and the link text is “Support”

2. This will link to an external page but leaves a residue block with the link to the Knack page intact. As below:

To hide this extra block just add the following CSS to make the extra box invisible:

li a[href="INSERT KNACK LINK PAGE HERE"] {
    padding: 0px !important;
}

where you’ll need to add the href of the knack page. e.g. my page is called Support and so the href is “#support”. If you’re unsure of the href value you can also open the live app, right-click, choose “Inspect” and find the href of the element in the HTML.

[CarlHolmes]

Nice @Harry, thanks for sharing, a useful tip

[Lauren]

Bummer, it looks like you can no longer add html to the name field without it being stripped Hopefully there’s another workaround out there.

[NormandDefayette_CortexRD]

Hey guys!

I’ve got good news: I’ve just completed the code that does exactly what you need.

Go see here: How to setup a blank page that jumps to a URL

It’s Open Source (public and free) and easy to setup - no code at all. Just go in the Builder, add a blank page and set its name to something like this:

Support LINK_OPEN_NEW=https://ctrnd.com/

Support is the text you’ll see in the menu, and the rest becomes invisible.

Set the page to be visible in the menu and that’s it!
You can even decide if it open in a new tab or the same window.

A little feedback would be appreciated

Have fun,
Normand D.

[Dean2]

Hi

This method still works as I just cut and pasted the previous code I’ve used and changed the address to LinkedIn.

Regards
Dean

[LeighBerre96926]

Still works for me too

[Duncan]

Thanks Harry,

I don’t appear to get this to work, so I’m wondering if an update to Knack has broken this fix you posted.

Just wondering if you have any ideas (or solutions) to get this to work, as I’d like to create an External Link on my Main Menu to take people back to the my Website which links to my Knack App.

Hoping you can help,

Kind regards,

Dunkie
Data Breaches Digest

[Johnny_Appknowledged_UK]

Hey Knack gang.

I just added a post for this on my new platform Appknowledged. Check it out

Use menu buttons to link to external site

[Eric4]

I tried to implement this and it doesnt work

[Johnny_Appknowledged_UK]

Thanks @Eric4,

I have revised the code to make this a little easier so thank you for pointing this out. With this code you can copy, you need to change two things, the name of the menu tab you wish for this to work and the URL you wish for this to be directed to.

When copying this code below you will need to Replace inside the quotes New Page on line 4 with your tab name. Then you will need to replace inside the quotes https://www.appknowledged.com with your URL on line 5.

$(document).on('knack-page-render.any', function (page, records, view, data) {
    
    const targetPageName = 'New Page'; 
    const targetPageURL = 'https://www.appknowledged.com'; 
    
    const modifiedTargetPageName = targetPageName.replace(/\s+/g, '_'); 
    const menuButtons = $('.knHeader__menu-list-item');   
    menuButtons.each(function(index) {
        const text = $(this).text().trim();
        const modifiedClass = text.replace(/\s+/g, '_');
        $(this).addClass(modifiedClass);
        
        if ($(this).hasClass(modifiedTargetPageName)) {
            const menuLink = $(this).find('a');
            menuLink.attr({
                'href': targetPageURL,
                'target': '_blank'
            });
        }
    });
});

Thanks a lot for your feedback and hope this works for you.

Thanks

[Eric4]

Thank you for working so quickly. I fix work and it’s working perfectly. Might be worth it to mention to people that they need to add a page before [if that makes any sense of.]