A Closer Look at NavEE

If you’re not in need of a tool like Structure, which allows you to override how pages and the site structure is created in ExpressionEngine, but would still like a dead simple way of creating and managing multiple navigations for your EE-powered website, you should give NavEE from Booyant a look.

NavEE is a module available only for ExpressionEngine 2 and it “takes the typically painful task of managing navigation, and make it simple and (dare we say) enjoyable.” With NavEE you can manage multiple navigations, re-order items with drag and drop, apply classes to nav items, create breadcrumbs and use any HTML you want (NavEE uses nested unordered lists by default). There are a lot of ways to manage navigation in EE but I found NavEE enjoyable to use. It’s probably because of the playful interface and user messages but also because it is just so simple to use.

Nav Groups and Navs

Following along with how ExpressionEngine handles statuses and custom fields, you first create a navigation group and then individual navigation items inside of the group. Individual navigations are displayed in a tree view, so you can set hierarchy and order.

Your existing navigations are always at easy reach at the top of the NavEE module screen.

Click on a navigation group gives you a tree view of the navigation. You can easily drag and drop nav items to reorder them or click on their icons to edit them. Each item has a simple editing interface and a toggle to show advanced editing options. These options include whether the nav item is show in the navigation, CSS id and class, target and even regular expression matching. Very cool stuff.

Template Code

Displaying your NavEE navigation is just a matter of adding one EE tag.

This tag is the simple way of adding your navigation. It outputs a nested unordered list. The NavEE tag accepts several different parameters (like id shown above) and they’re all listed out in the documentation. The parameters give you all of the control you need to make the nav look exactly how you want.

If you want to get a little more complex, you can use the custom tag to use your own markup for displaying the navigation.  This is also very simple to do and includes several parameters to customize the output.

Wrap-up

Unlike Structure, NavEE doesn’t create site pages for you. You have to create all of your content and pages on your own and then create a navigation with them using NavEE. This isn’t necessarily a bad thing, it’s just the scope of the NavEE module. Some people don’t all of the extras that a module like Structure offers; they just want to create navigations and drop them in the templates.

To get started with NavEE I would suggest you watch the quick screencast Booyant put together. It’s helpful it getting that initial run-down of how NavEE works and what you can do with it.

The NavEE module for ExpressionEngine 2 costs $35 US and is available now.

Thanks for the folks at Booyant for sending over a copy of NavEE for me to play with for this write-up.