Bright Rocket

Fly Smart!

A blog about design, business and life.

Using Pages and Low-Reorder for Flexible Navigation and Site Structure

Posted on March 04th 2012 to Design, ExpressionEngine

EE Insider strangely enough just asked the question I recently had to ask myself. Namely, how do EE developers manage navigation and site structure in EE? A quick search of Devot:ee reveals several solutions to this age (ok years) old problem. You could go with the powerful and well regarded Structure ($65), the fairly new on the scene Navee ($35), toss in some Crumbly ($45) action for bread crumbs. All these solutions are awesome in their own right and well worth the money, but I was looking for something simpler and in Structure's case, less complex to initially implement and learn.

My Requirements were as follows.

  • Must work with the existing Pages module in ExpressionEngine
  • Allows me to generate a dynamic menu based on channel pages for each main section of the site.
  • Allows me to order the pages in the menu via drag and drop
  • Must work well in an existin site's dropdown shown below (In this case, I am working with Suckerfish dropdowns done several years ago by the last dev)

Enter Low Reorder ($16), an addon that I think is probably not the first that come to your mind when you are thinking about navigation and site structure. I've used Low Reorder before on a project to simply move the order of entries around on a listings page and to control the order of people on a staff page before, but what I totally missed what it's integration with EE's native category abilities. Hidden away under each channel reorder settings is the option to "Show entries per single category", which is where all the magic happens.

Low Reorder Category Settings

Turn that on, and you'll now be able to choose a category before being shown the list of entries to order. This is when I had my "aha!" moment.

So with my new found knowledge in hand, I created a category group that corresponded to the main navigation sections that required "static" page items. Next I assigned each Page entry to a specific category.

Next I edited the static navigation to include a few things. Each navigation category such as "About" had two entry tag sets. The first pulls in only the first item, as defined by my custom Low Reorder field called "cf_page_order". In the next set of tags, I removed the limit, and replaced it with an offset of 1. The code should look something like below.

<li class="menuItem">
			{exp:channel:entries channel="chan_pages" disable="member_data|pagination|trackbacks" dynamic="no" orderby="cf_page_order" sort="asc" category="7" limit="1"}
			<a href="{page_url}" class="first dir" id="page-{entry_id}">{title}</a>
			{/exp:channel:entries}
	<ul>
			{exp:channel:entries channel="chan_pages" disable="member_data|pagination|trackbacks" dynamic="no" orderby="cf_page_order" sort="asc" category="7" offset="1"}
			<li><a href="{page_url}" class="last page" id="page-{entry_id}">{title}</a></li>
			{/exp:channel:entries}
		
	</ul>
</li>

I wanted to make the page creation and order intuative for my clients so I utilized Zoo Flexible Admin to flesh out a nice simply navigation where they could create, edit or order pages without having to hunt around.

While this solution isn't as flexible as some of the other solutions out there, it worked well for this project and I have a feeling I'll be using it again. I'd like to reduce the number of Entry tags used, and find a good solution for including static items in the navigation in the next version.

I'd love to hear any feedback or improvements you might have.

Using your method, when you view the pages in Publish > Edit do the pages still appear in alphabetical order?

Gravatar of Carl Evans Carl Evans wrote this on March 08th 2012

Sadly no, but they appear in the right order on the Low Reorder page.

Gravatar of James James wrote this on June 03rd 2012

Tell someone why they are wrong