Today, we’re releasing a new premium account feature: the Navigation Manager. Here’s how it works in one sentence: you tell PageLime where your navigation file is, you put the css class “cms-navigation” on the element that contains your navigation, and PageLime publishes your updated navigation code into the file. Keep reading for an in-depth tutorial.

Managing navigation with PageLime has always been a super simple task: put some “cms-editable” tags on links, make the navigation file a server side include, and publish away. For most sites this works great. But what about sites with deep hierarchical menus? Well, it still works but now you’ve got a lot of bubbles on the screen. We’ve published some thoughts on this before in this post, and this is one of the reasons we’ve developed the Navigation Manager.

The Navigation Manager is a bit more involved than simply putting a CSS class on a DIV tag. First, you must use an include file for your navigation, so that it is shared across your entire site. In the future, we will probably do away with this requirement, but for the time being, it’s the simplest way to ensure it gets updated on all of your pages.

Once your navigation file set-up in an include, you must wrap your navigation HTML code in an element that has the CSS class “cms-navigation”. This is how PageLime knows where to publish updated navigation code. For example:

<div id="top_nav" class="cms-navigation">
  <!-- navigation will come here -->
</div>

OK, with the above two steps complete, you now have to enable the “Navigation Manager” feature on the site features screen.

Once the feature is active, you will see a new site dashboard item: “Manage Navigation.” When you open it up for the first time, you will be prompted to configure your navigation settings. Here’s what you’re going to need to do:

1. Tell PageLime where your navigation file is. (for example: /includes/header.php)
2. Enter your navigation code into PageLime, so we know what format to use when publishing.

Step 2. might look a bit intimidating, but it’s actually super simple. In the code editor box, you can enter some pseudo-code that tells PageLime how to render your navigation. There should already be some sample code that you can use in there. When you hit publish, PageLime will take this code, and merge the navigation data into it, and then publish it into the DIV tagged “cms-navigation” in your navigation file.

The pseudo-code is based on the popular Apache Velocity template engine. You can read their user guide for an in-depth overview of everything you can do, but you really don’t need to do that. Take a look at the code below to learn some basics:

#foreach( $navItem in $navItems )
  <div>
     <a href="$navItem.URL" class="nav-link">$navItem.Title</a>
     #if ($navItem.ChildNodes.Count > 0)
       <div class="sub-nav">
         #foreach( $subNavItem in $navItem.ChildNodes )
           <div><a href="$subNavItem.URL" class="subnav-link">$subNavItem.Tile</a></div>
         #end
       </div>
     #end
  </div>
#end

The areas highlighted in bold are the pseudo code that renders the navigation data into the HTML. So let’s step through what’s going on:

• The first line basically says “for each navigation item in the group of root navigation items, render the following”
• Then, we have some HTML code, which has some special tokens that will get replaced, such as $navItem.URL and $navItem.Title
• Then we loop through all of the sub navigation items for the current $navItem and render the subnav.

OK, now you can save your settings and you’ll be taken back to the navigation manager. You can now start building out your navigation, and save your progress. Once you or your client are ready to push the changes out to your site, hit the publish button and you’re done!

Here are some additional things you can do:

• On the “navigation settings” screen you can lock the root nodes of the navigation, so that the primary navigation can only be edited by the administrator. For example, if you don’t want your clients to change anything but the sub-navigation, you can lock them on the settings screen. (Additionally, any sub-navigation node can individually be locked by editing it and checking the “lock this node”).
• You can re-order the nodes by dragging them by the globe icon and dropping them in the desired space.

Hope that was informative! As always, post questions and thoughts in the comments below or in the forum.

Tags: navigation

This entry was posted on Saturday, May 22nd, 2010 at 5:05 pm and is filed under Features. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.