Javascript in Quick Launch and Top Link Bar links

There are some situations where you may need to use javascript in links situated in the Quick Launch or the Top Link Bar. For example, you can use javascript to open a page in a modal dialog (see for example my article about modal dialogs):
<a href="javascript:...">click here</a>
How can you link to javascript from the Quick Launch or the Top Link Bar?

Normally, you would specify those links in the navigation settings page (Site Settings > Navigation), but you can only input valid supported protocols:
javascript not allowed
There is a workaround, of course. There are some site templates that don't have a navigation settings page, but rather 2 separate pages for the Quick Launch and the Top Link Bar. You can access these pages from any SharePoint site, even if you can't see them in the Site Settings page:
  • Quick Launch: http://<site address>/_layouts/quiklnch.aspx
  • Top Link Bar: http://<site address>/_layouts/topnav.aspx
Here you can enter any type of url:
javascript allowed

Print Friendly and PDF

11 comments:

SharePointRyan said...

This is a great tip, thanks for sharing - works perfectly!

Ami said...

Thanks Ryan!

Robert McQuaig said...

Only downside to this is that you can't add it to the drop down menu of global navigation, unless I am missing something?

Ami said...

You are correct, these pages display the top-level links. 

Robert McQuaig said...

Thought so...So, my next question is have you figured out a way to do just that? I have been roaming the web trying to find a solution to do so but keep coming short. Any ideas how to accomplish? I'd love to take advantage of the modal dialog in the drop down navigation...Aside from creating a custom navigation menu, which I'd like to avoid...

Ami said...

I think what you're trying to achieve is impossible with these menus... In order to display correctly the same menu hierarchy throughout all the sites you have to enable navigation inheritance in all sub-sites. By doing so you'd be unable to edit individual links.
Furthermore, I found out that even if you edit the navigation of a sub-site it won't be displayed in the top site menu. I couldn't get it to display headers (links added in topnav.aspx are headers actually)

Ami said...

It is a bit tricky, depending on the hierarchy of your sites...
In order to display correctly the same menu hierarchy throughout all the sites you have to enable navigation inheritance in all sub-sites. By doing so you'd be unable to edit individual links in sub-sites.
If you are willing to edit manually the navigation in sub-sites, you can use the method displayed in this post to use the modal dialog.
A word of advice - first create the links using the default navigation page, and then edit them using topnav.exe. Using topnav.exe creates headers, these are not displayed in the sites above. Only links are displayed (as far as I know.)

Mladen said...

I have another problem: cannot set audience to this kind of links. Do you know some workaround for this? Thank you

Luca Sanchez said...

Ok so this is a long shot seeing this post is pretty old, but is this possible at all to do from a SharePoint Link list?

Ami said...

These settings do not apply to link lists, only to these specific navigation controls. You would have to find naother solution for link lists.

Luca Sanchez said...

wow that was quick .. was expecting no response! :)
Fair enough, having a quick look around now but seeing a few good JS options for 2013. Would you know of any other solutions for 2010?

Post a Comment