Footer navigation

We like to use simplified footer navigation on all our websites. Footer navigation serves several purposes...

  • Many users expect certain items to be in the footer nav, such as terms + conditions, sitemap, privacy policy, homepage link and contact link. It makes sense to provide this for these users.
  • Footer navigation is a great way to provide sitewide links to pages that aren't quite important enough to be on the main navigation. Nobody would want to see your sitemap link on the main nav, so the footer is the logical place for this.
  • Footer navigation is a good place to put links you aren't especially proud of. That spammy link exchange script, or some sitewide SEO links, or whatever else you have in mind.
  • Text based footer navigation is very important if your main navigation is inaccessible to search engines. If you use Flash or Javascript for your main navigation, then be sure to have a comprehensive footer navigation. We strongly recommend you don't use flash, javascript or images for main navigation. It's bad for search engines, it creates accessibility problems, and it's usually a lot slower than CSS styled text navigation.

Adding footer navigation to a theme

There are 2 ways to add footer navigation. Both require editing of templates/template.tpl in your theme.

Method 1. Manually add the links

If your footer navigation is unlikely to change or very simple, it's easy to add some static HTML to your template and leave it at that. You can micromanage the HTML however you want, but you won't be able to edit the footer navigation via the CMS anymore.
Simply add any HTML to your footer area...

<div id="footer">
<a href="{$SITEURL}" title="Green Widgets are our speciality">Home</a> |
<a href="sitemap/">Sitemap</a> |
<a href="" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> |
<a href="contact/">Contact Us</a>

Manually adding your footer gives you more control over your footer content. The CMS cannot automatically create complicated footer links, such as the Valid XHTML link above.

Method 2. Use Jojo for managing footer Navigation

Jojo CMS has an option for each page to determine whether the page appears on the footer navigation or not. Under "Edit Pages" on the "Navigation" tab, select "Yes" on the "Footer Navigation" field.
The footer navigation will be created dynamically. This is the recommended method.

Simply add the following Smarty variable to your footer area...
<div id="footer">

The HTML output of this variable is an unordered list, created by the CMS. From an accessibility point of view, this is great, but it does take a little bit of extra CSS to get it looking good. The logic used is similar to this article on horizontal lists.

The following CSS code may be appropriate to style the footer nav to look good...
#footer-nav li {
display:inline; /* gets the list items showing horizontally */
list-style-type:none; /* removes the bullets */
padding:0 5px; /* some space between each item */
margin:-2px !important; /* removes the space left by the bullet point */
margin:0; /* don't need to remove the space for IE */
border-left: 1px solid #ccc; /* instead of the vertical bar */
border-right: 1px solid #aaa; /* a little bit of shadow on the bar */

#footer-nav li.first {
border-left:0; /* no bar required before first item */

#footer-nav li.last {
border-right:0; /* no bar required after last item */

#footer-nav li a {
text-decoration:none; /* removes the underline from links */

#footer-nav li a:hover {
text-decoration:underline; /* adds the underline back on mouseover */

This may seem complicated, and a lot more work than using a pipe or vertical bar character (|). The problem with the pipe character is that some screen readers will read out "vertical bar" after each menu item. Imagine a screen reader spitting out something like this...
home vertical bar sitemap vertical bar valid xhtml vertical bar contact us

Not very friendly for screen-reader users. By using a list, the screen reader will have the list read out appropriately, and they can skip to the end of the list if desired.