InnerWorks Logo
Return to main siteReturn to main site

Introducing the Meganav Package

Introducing the Meganav Package


02 Aug 2017 • 3 min read

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

Innerworks is coming soon...

This blog was originally published on our previous Cogworks blog page. The Cogworks Blog is in the process of evolving into Innerworks, our new community-driven tech blog. With Innerworks, we aim to provide a space for collaboration, knowledge-sharing, and connection within the wider tech community. Watch this space for Innerworks updates, but don't worry - you'll still be able to access content from the original Cogworks Blog if you want. 

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!

Community tech aid

Innerworks and Cogworks are proud to partner with Community TechAid who aim to enable sustainable access to technology and skills needed to ensure digital inclusion for all. Any support you can give is hugely appreciated.