menu-interface-old_0_0.PNG

Content Menu Module – Menu Authoring Made Easy (New Module + Screencast)

Friday, April 27, 2012 - 11:04

Menu authoring in Drupal is cumbersome for many editors. We just released the Content Menu module that improves menu management in Drupal for editorial sites, by better connecting menu management and content authoring. How did we do this – and why?

Menu Authoring made easy

Content menu module rewires Drupals default menu management interface for tighter integration of content authoring and menu management. The goal is to make building a site's structure and content in one fluid process seamless, easy and natural. Editors can create content along with a menu item without ever really leaving the menu management process. Editors can find, associate and edit content right from the menu management interface. Content Menu module makes building a structure-oriented website "page by page" with Drupal effortless and intuitive.

To get an impression of how easy content centric menu management is with the content menu module, watch our screencast:

The Problem  (with Drupal's Menu Management Interface)

One of the pain points for many content authors and sitebuilders in Drupal is the way Drupal handles menu management by default. Drupal's strength and flexibility of decoupling menu structure and content authoring is turning into an confusing and sometimes irritating weakness, that clients thinking in hierarchical structures repell away from Drupal toward older more static systems, like Typo3, which is extremely present in German speaking countries.

If you are an editor (let alone a non-Drupal one), trying to get your head around this strange Drew-pal software, you end up asking:

  • "Why can't i add a new page in my menu and edit it right away?"
  • "What does that strange screen mean that appears when i click 'Add item' in the menu administration page?"

One way to answer those questions would be to explain to our customer and editors the abstractions of Drupal, and the task seperation between first authoring nodes and then some time later building a menu structure. And we all have done this explanation and "adapt your thinking to Drupal" teaching a lot of times, as Drupal community, as consultants and as contractors to our customers. And it's so wrong. We at Wunderkraut believe: We have to meet our customers and the users of our system, not vice versa.

So how do we meet our users, namely site editors, when it comes to menu management in Drupal?

Meet the Editor

In our experience, many editors think visually and along the site structures they are building for the end user. An editor doesn't cognitively seperate the task of building the site structure and the associated content (nodes like pages or magazine articles, and also views or panel pages). Dont't get us wrong: It's absolutely great that Drupal technically decouples content and structure and offers so much more flexibility than other systems. But forcing our users into this thinking may drive them to competitors (that are ironically less flexible). We have to give our users the tools that help them the most – and in many cases, that means wrapping Drupals general flexibility and technology into a tangible interface and workflow for a specific user group's tasks at hand. For many use cases in editorially driven or hierarchically structured sites, improving Drupal's menu management interface revolves around a single most important thought: Connecting site structure and content.

The Editor's Needs

With this thought in mind, we identified the following user stories that are most important for editors, and that an improved menu management interface for Drupal would have to meet : As an editor, i want to...

  1. create a menu item along with creating a content
  2. create a menu item for an existing piece of content
  3. create a menu item with a new piece of content
  4. edit a menu item's associated content from within the menu management interface

While the first story is basically covered by the "Menu settings" fieldset in Drupal's node add/edit forms, it could still be improved and simplyfied (honestly, most people don't want to enter a menu item description while creating node content).

The second story can technically basically be achieved by clicking "Add link" on the menu structure form. But is it user-friendly? Hardly. After you click "Add link" you end up with a confusing form where you have to put an url path into a text field, select a parent item in a clumsy list field and have to guess a 'strange' 'weight' number out of the blue. Definitely room for improvement. An editor needs to do all that visually and wants to be able to search, filter and select a content for a newly added menu item.

Stories two and four are unknown to Drupal and not possible to do out of the box. So these would need the most attention.

We set out to implement all these stories and as well…

  • offer more tools/actions to connect menu and content
  • offer short-cuts to reduce number of clicks
  • make label wordings clearer, less technical and more editor-task-oriented
  • add information about associated content where helpful
  • focus the interface on the most used tasks

How it Works

Basically, Content Menu evolves Drupal's simplistic and isolated menu management interface into an editor's intuitive central for site authoring:

The most important new possibilties are to directly asses and edit a menu item's linked content and to directly create and position a new menu item with selectable target (content) type:

You can create a new menu item as …

  • URL – With the traditional menu item form
  • Dummy – As a dummy menu item (with simple dummy link target)
  • New NODETYPE – directly create a new content for the new item
  • Existing content – selecting an existing content via a nice filterable view (if views is enabled)
  • Menu position rule (if the Menu Position module is enabled)

IMPROVED WORKFLOWS

The workflows are kept concise and seamless, e.g for adding new menu items along with brand new content or with comfortably choosing existing content to link to. They're best understood visually:

To see this in action, simply try out the module or watch out Screencast (see above).

All the goodies

The changes and improvements made by Content Menu include …

Menus overview:

  • Hiding system menus for "normal" editors (without special permission)
  • Reducing Links to "edit" a menu

Menu links listing:

  • Relabeling the tabs ("Edit" and "Configure")
  • Directly assesing, accessing and editing a menu item's linked content from the menu management interface
  • Therefore, making a new "edit content" operation the default operation for menu items linking to nodes, views and panel pages
  • Tidy up and re-labeling operations ("edit content", "configure item", "delete") into a ctools dropbutton (if ctools is available)
  • Directly create new menu items by entering title and positioning new items (analogous to field management interface)
  • Simple inline editing of menu item titles

Menu management forms and pages:

  • Consistent menu admin breadcrumbs
  • Offer choice to delete associated node content along with deletion of a menu item (if checked and user is permitted) 
  • Node edit forms "menu settings" fieldset slightly improved

And maybe some more nice little tweaks.

How to install

To install Content Menu module, …

  • Download and enable the module from http://drupal.org/project/content_menu
  • Download additional modules:
    CTools and Views modules are strongly recommended (though technically not required)
    Menu Position module is supported (and great for rule based appearance of content in menus)
  • Configure your permissions and content types:
    Make sure at least one content type is configured to have menu entries in the menu(s) where the content should be placed.
    Make sure the user you try the module with has sufficient permission (to access admin area, to administer menus, to administer content, to create and delete nodes of the respective type, …)
  • Go to Admin > Structure > Menus and start adding menu items into e.g the "Main Menu".
  • Or watch out Screencast to get ideas of what to do (and how).

Let's get starteD

Download the module from drupal.org at http://drupal.org/project/content_menu, watch our Screencast (see above), discuss menu authoring experience at drupal.org or participate in the module's issue queue.

Now you now what the new Content Menu module is good for, and how we think the menu authoring experience in Drupal could look like. What do you think? Let us know and post your comments below!

 

Comments

I love just what this topic did for me and
people I know. Through knowledge of your tips you have contributed will really make you an even better person and
more ideal for yourself, family as well as your community.
I admit I would not know much like you on this issue and I believe that over time, with more return visit to your blog, I can end up being an expert like
you. I've a lot to learn. This is a lot of work and I believe the time spent on your site would be worth the amount of of effort.

We did a project recently where we used content_menu together with menu_attributes without any issues. But there is always the possibility that we overlooked something or you are having problems that occur with your special combination of modules.
We would like to provide help and look into your case, if you file an issue with a more detailed description over at the project page on d.o:
http://drupal.org/project/issues/content_menu?categories=All

This module doesn't work with menu_attributes module.

Yes, menu_content should be compatible with all menu extending modules, since it does only alter the menu administration interface, but nor the logic. So yes, i guess menu_views does work well with content_menu, however we didn't test all possible module combinations. I'd suggest you try out if a specific combination works and report whether and how it works out and whether perhaps even further integration makes sense. If you do so, please report this in the module's issue queue.

Adding of views from this interface is easily possible, you can implement it via hook_menu_item_target_types_alter (see content_menu.api.php in latest dev branch version). We didn't do that yet because we thought that adding views might not be as common a task to support, compared to nodes. But we might include it out-of-the-box (please just file an issue for that in the modules issue queue!).

This looks nice. Can we also add views from this interface?

Only those node types are shown in the "target type" dropdown that are enabled for that specific menu in Drupal's standard node configuration form - so you first have to configure the node type settings for the node types of interest to "receive" a menu item for the menu of interest, as state on the module page at http://drupal.org/project/content_menu

Great module - been waiting for something like this for D7, since the module for D6 wasn't upgraded.
One thing I noticed - when this module is activated the ability to add menu items to menus other than Primary or Secondary goes away - there is no longer an 'add' link.

I am trying this on a new website. The Target dropdown is not showing the content types that come along with a new Drupal install (Basic page and Article). Both are configured to be used on the Main menu. Am I missing a configuration?

I'm definitely looking forward to trying this out. We've noticed this in the past as a sticking point in training some end users, so I'll be excited to smooth out the process. Thanks!

Import/export is a different thing which mainly takes place in the backend and guts of Drupal. Content_menu is explicitely aiming to improve content centric menu authoring experience. If there's some approach (e.g. module) for content-associated menu item import/export, and some interface parts can be improved to support this, i'd be happy to host any such interface parts in content_menu.module, if helpful.

I cant wait to try this out.... It would be wonderful if this could lead to the import/export of menu items along with content.

Just pushed a new version to the 7.x-1.x branch that now uses hooks to extend the menu item (element's) behaviour and target types, so any other module can now interact and extend some aspects of content_menu.module: http://drupal.org/node/1550100

This module will be very useful to many. Great work!

Outline_designer is indeed an interesting module. So why a new module content_menu and not user/join outline_designer? Okay:
1) Despite of having in fact thought of something more similar to outline_designer first, the focus for content_menu is not the hierarchy management interface, but the editorial workflow for integration of structure and content.
2) We were looking to improve and evolve existing menu authoring experience
3) We simply didn't know of outline_designer.module

Great idea, this will be a huge time saver in starting off new sites.
Thanks for the tutorial, well done.

looks neat but as the author of http://drupal.org/project/outline_designer I'm curious as to why you decided to start from scratch instead of wanting to join efforts? They seem like they are trying to achieve some very similar things. OD 2.x has support for menus and is being actively developed in D6 and D7 concurrently. Works with books and menus and is easy enough to make providers to overlay on draggable views / anything that's utilizing tabledrag.js

And great video! thanks for taking the time to make it.

This is awesome! Congratulatins on the great work and I would definitely like to see something like this in D8 core, it's all about the UX! :)

When I came from the Joomla! side of things it was quite hard to get my head around the Drupal menus. I think especially in the german speaking countries where Joomla and Typo3 are commonly used your module will help Drupal a lot! Thanks!

Danke wunderkraut für die Arbeit, da freuen sich sicher viele Leute. Ich bin echt gespannt, was uns noch für kuhle Module erwarten ;) Gute Arbeit!

Very nice module. Wouldn't mind seeing this in core for D8. Menu management sucks for content rich sites. Especially multi-language

It's very nice but I can't see the "Dummy" option when creating a menu item do I need an extra module besides views and chaostools?

thanks

can't see the "dummy" option on the dropdown menu, I'm using 7.22