Dynamically Injecting Menu Items in Orchard CMS

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 :)