Dynamically Injecting Menu Items in Orchard CMS

As most Orchard Web Developers are aware, Orchard 1.5 has an updated navigation module that supports hierarchical menus, breadcrumbs, and drag-and-drop menu positioning. But, did you know that navigation is now completely pluggable!? Navigation is indeed pluggable and I couldn't resist spending 1 hour on a Friday evening hacking together a quick sample! When you are finished with this, you can learn more about Orchard at Orchard Tutorials!

Orchard CMS Navigation is Pluggable

I had been testing and playing with the updated navigation module in Orchard 1.5 and was thoroughly excited about the ability to populate menu items based on a query! I was smiling end-to-end when I used the Query Link feature for the first time and thought these guys thought of everything!

Query Link - Inject Menu Items in Orchard CMS based on query

Of course, an inquisitive Orchard CMS Developer is going to wonder how he/she can dynamically inject menu items with his/her own pluggable module. It's 11pm on a Friday night and I thought - let's see if I can create a quick navigational plug-in that injects tags as menu items used by the Orchard Website. I noticed the feature wasn't included in the Orchard.Tags Module and I thought I would remedy the situation :)

Displaying Orchard Tags as Menu Items

I'll toss the sample on GitHub ( Tags Menu Item on Orchard Gallery ) next week for you to download, but I couldn't resist blogging about it beforehand just to show you it is possible and really cool! I'll probably code another sample tonight or tomorrow after the kids go to bed :)

If you take a peek at Orchard.Projections, which is responsible for queries, you will want to look at 2 classes:

  • NavigationQueryProvider - This is an INavigationFilter and responsible for populating the menu with menu items.
  • Migration - Scroll down close to the bottom of the file and notice a new type NavigationQueryMenuItem and that it has a new stereotype, called MenuItem.

The key is:

  1. Creating a type with a setting that includes a MenuItem Sterotype
  2. Creating an INavigationFilter that checks for the type and then injects the menu items as necessary.

So in about 60 minutes start to finish I was able to easily create a NavigationTagsProvider as well as a NavigationTagsMenuItem that injects tags as menu items into your Orchard Website's navigation. Note: I removed other menu items for clarity.

Creating INavigationFilter in Orchard CMS

Dynamically Inject Menu Items in Orchard CMS

In the image shown above, I was pretending to create a simple Orchard CMS e-commerce website that used tags as product categories. Each Product Content Type was tagged in a particular product category using the Orchard Tags module: Coats, Shirts, Shoes, and Ties. Although I don't show it, I used the Query Link to populate the Featured Products Menu, which is a whole other subject in itself!

Conclusion

Download the Orchard CMS 1.5.1 source code and have a go at creating your own INavigationFilter and MenuItem Stereotype. I'll admit Orchard CMS has a pretty steep learning curve, but it is so worth it!

If you need help, I am an Orchard CMS Developer for Hire. Contact me :)