Dynamic Navigation Menus Using Server Side Includes

The Problem

Managing navigation menus can be a real pain, especialy if you are running a static site. If you want to add or change a navigation menu item on a website with 100 pages, you'll have to edit 100 pages or spend the time writing a script to do it for you.


A Content Management Systems (CMS) like WebsiteBaker or Joomla can make the job a lot easier, but a CMS requires more time and resources compared to a static site. A CMS typically requires PHP and MySQL, which requires more CPU power and more memory. A static site only requires Apache or Lighttpd and can run on a low-end server with as little as 128 megabytes of RAM. In addition to memory and CPU requirements, PHP and MySQL add security risks and require additional time to keep updated.

You could use some client side solution like JavaScript, but that is slow and sort of lame IMHO. This type of solution still requires you to edit all 100 pages if you want to change something.

The Solution

So, what is a webmaster to do aside from a CMS? Introducing Server Side Includes (SSI), a handy feature of the Apache and Lighttpd web servers. Lighttpd has limited SSI capability compared to Apache, but it is enough to provide dynamic menu navigation. This HowTo won't teach you how to setup SSI on Apache or Lighttpd, so you should read more about SSI and how to setup SSI on Apache or Lighttpd, before you start.


Now that you have SSI running on your Apache or Lightppd web server, you are ready to transform your static navigation menu into a dynamic, SSI generated navigation menu. The first step is to make a backup of all of your files. Next, create a file called navmenu.include in your document root (or under a directory named SSI or menu or whatever). Next, edit the file and add your navigational menu as needed; see my example for this site below.

navmenu.include file 


        <li><a href="index.html">Home</a></li>

        <li><a href="howto.html">HowTo</a></li>

        <li><a href="soapbox.html">Soapbox</a></li>

        <li><a href="downloads.html">Download</a></li>
        <li><a href="yourip.html">Your IP</a></li>


Now that you have your include file created, add the SSI statement to your HTML in the body section; see below. 

SSI statement 

    <!--#include virtual="navmenu.include"-->

That's all there is to it, you now have a dynamic navigation menu. SSI includes are useful for more than just navigation menus, you can use an SSI include file to manage your footer, static images, page title, keywords, etc.


Back To Articles