Introducing the Meganav Package

A flexible, draggable link picker for constructing site navigation menus in Umbraco 7

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”?

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?

Back office navigation

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.

Umbraco Meganav package | The Cogworks

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!

  • Image for How our Umbraco Health Check works Build

    How our Umbraco Health Check works

  • Image for Working with an Agile Driven Agency Strategy

    Working with an Agile Driven Agency

  • Image for Updating Cogworks Umbraco Find and Replace: V7 to V8 Build

    Updating Cogworks Umbraco Find and Replace: V7 to V8

  • Image for Introducing Nuxt.js: Why We Love This Framework Build

    Introducing Nuxt.js: Why We Love This Framework

Ready to collaborate ?

Get in touch to see how we can transform your digital presence.

Send us a message