Adding Custom Links in SharePoint Portal Server 2003 Top Navigation Bar

In SharePoint Portal Server 2003, there is no easy way to add custom links to the top navigation. All the links in the navigation bar are generated dynamically by the server. Using JavaScript, we can extract the code for the top navigation bar, add custom links, and then re-render the code for the navigation bar.

In the example screenshot below, you will notice that we've added both a text link and a graphical icon link to the toolbar. The text link goes to the Google search engine and the telephone icon goes to a phone list. We can mix and match text and images and add as many extra links to the navigation bar as our user's browsers will comfortably allow. Using this method, all our custom links will appear after the dynamic navigation links that are generated natively by Sharepoint Portal Server 2003. If you have links that you want to always be available to every portal user all the time, this is an easy way to add them.
To add links like this to your portal, add the code below to your OWS.JS file and customize it as needed.

Get the code. Sorry, Blogger didn’t seem to like having JavaScript code in the post. :(

Hopefully, the comments in the code are enough to explain what's going on here. Essentially I’m using JavaScript on the pageLoad event to extract the code for the navbar table. I store it in a string variable, remove the closing tags, add onto the end enough code to create a new table cell (or two), append the closing tags back on, and rewrite the navbar table back to the client. The IF statement that looks for the existance of the navbar keeps the code from generating errors on WSS pages since they don’t contain the same navbar element. If you do have any questions, just let me know.

I was inspired to write this script while learning techniques presented in our Extreme Makeover - Portal Edition class, which is being offered again the first week of December, 2006 in Chicago.