Introducing the Meganav Package

We've been busy working on a few different packages at The Cogworks. You may have read Greg's blog about the birth of our Find and Replace Package. Around the same time as the release of Find and Replace, we also released Meganav - a flexible, draggable link picker for constructing site navigation menus.

Now that we’re over the hump of launching, I thought it would be worthwhile to share a little bit about the story behind the Meganav package.

A couple of months before the Find and Replace idea was being thrown around the office, I sat down and pondered the ways in which we could improve the Umbraco backoffice. What was missing? What’s something I, as a user of the CMS, found painful? Is there anything out there that other systems are doing much better than Umbraco does right now? How can we “Make Back Office Great Again”?

I got to thinking about the various sites we manage and how we build our site navigation. Out-of-the-box Umbraco has the Multi Node Tree Picker (MNTP) which is perfect for creating simple single level navigations, but what about those sites where we need more complex structures?

Here are some ways that I have seen navigation managed in the Umbraco:

• Just output the tree – output a list of the top level nodes within the content tree of your website, for each of those items output a list of their child nodes, and so on down as many levels as you need
  
  
• Create a structure within the content tree – create a structure somewhere globally outside of the content tree to reflect the navigation. Each item in this structure represents an item in your navigation and has a link picker to choose it’s destination
  
  
• Pickers everywhere! – a MNTP somewhere globally in your website, followed by another picker on every node to choose the “children”
  
  
• Just hardcode it, it will never change! – this is great until it inevitably does change. Marketing deciding they want to add a new navigation item but not finding a way in the CMS results in frustrated content editors and developers being asked to do mundane tasks like these changes!
  
  

All of these solutions are hideously unfriendly to editors. Of those options, the clearest solution for an editor is #2 - creating a structure within the CMS to reflect the desired site structure. However, creating nodes to represent links to pages that already exist in the CMS is tedious and it can still be difficult for an editor to visualise the whole navigation in one go. 

So, how can we make this experience better? With AngularJS in the Umbraco 7 backoffice, we can now create rich and dynamic property editors with ease. Starting with just a few lines of code it is possible to to make workflows that were once painful, such as building a navigation, much more interactive and intuitive for a content editor.

Meganav offers a flexible drag and drop interface to easily allow an editor to pick a navigation item then drag it into the position they desire. Navigation items can be nested below other items in the list, simply by dragging them to the right. Choose to link to content items or to an external link, set the link text, and also control how the link opens when clicked! 

Version 1.0 has been downloaded over 1000 times so far since it’s launch in March and feedback from the community has been overwhelmingly positive!

To add to the excitement, a few days ago we launched v1.1 with umbracoNaviHide support, some bug fixes and improvements, and a handful of great community pull requests on Github (thanks Arnold Visser and Robin Neal #h5yr)! It’s available for you to download and use right now on Our Umbraco and Nuget.

 The ongoing support and feedback from the community is very much appreciated. A big thanks to everyone who’s downloaded so far!