Writing by Peter Hilton

How to generate navigation bar links

The totem pole in Great Windsor Park, England A common part of an HTML page template is a common navigation bar, just like the one above. If you're being nice to the user, then the navigation bar never includes a link to the current page. This HOWTO shows one way of achieving that using some server-side PHP code.

The approach I use is to

  1. use a single page template with common code for the navigation bar
  2. define a function that outputs a single link, taking parameters that specify the current page, and the link's destination, text and title
  3. code the function so that it navigation item text is not a hyperlink when the current page is the same as the link destination
  4. call the function, in the template, for each of the navigation bar links.

Here's what this looks like, in PHP, for these pages. First, the PHP function is


function InsertNavigationLink($page_basename, $url_basename, $label, $title) {

  if (strcmp ($page_basename, $url_basename) == 0) {
	 echo "<strong>$label</strong>";
  }
  else {
	 echo "<a title=\"$title\" href=\"$url_basename\">$label</a>";
  }
}

Then, in my page template, I output the navigation bar like this, having already populated the $base_name variable with the file name of the current page's URL.


<?php $base_name = basename($_SERVER['REQUEST_URI']); ?>

<?php InsertNavigationLink($base_name, 'index.html', 'HH home', 'Hilton Harbour main page'); ?> |
<?php InsertNavigationLink($base_name, 'new.html', 'what\'s new', 'what\'s newest on Hilton Harbour'); ?> |
<?php InsertNavigationLink($base_name, 'index.html?theme=contents', 'contents', 'Table of contents'); ?> |
<?php InsertNavigationLink($base_name, 'index.html?theme=index', 'index', 'Alphabetical index'); ?> |
<?php InsertNavigationLink($base_name, 'index.html?theme=photos', 'photo index', 'Alphabetical index'); ?> |
<?php InsertNavigationLink($base_name, 'about_hh.html', 'about', 'about Hilton Harbour'); ?> |

In this example InsertNavigationLink is a subroutine that outputs the label directly. It would probably be neater to make it a function that returns the HTML as a string, like this.


function NavigationItem($page_basename, $url_basename, $label, $title) {

   if (strcmp ($page_basename, $url_basename) == 0) {
      return "<strong>$label</strong>";
   }
   else {
      return "<a title=\"$title\" href=\"discussion/$url_basename\">$label</a>";
   }
}

This has the advantage that I can then use slightly neater code in the page template:


<?php
$links = NavigationItem($base_name, 'index.html', 'HH home', 'Hilton Harbour main page') . "|";
$links .= NavigationItem($base_name, 'new.html', 'what\'s new', 'what\'s newest on Hilton Harbour') . "|";
$links .= NavigationItem($base_name, 'index.html?theme=contents', 'contents', 'Table of contents') . "|";
$links .= NavigationItem($base_name, 'index.html?theme=index', 'index', 'Alphabetical index') . "|";
$links .= NavigationItem($base_name, 'index.html?theme=photos', 'photo index', 'Alphabetical index') . "|";
$links .= NavigationItem($base_name, 'about_hh.html', 'about', 'about Hilton Harbour');
echo $links;
?>

Share on TwitterShare on LinkedIn