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!
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:
- Creating a type with a setting that includes a MenuItem Sterotype
- 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.
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!
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!