There is a new Shape Link in Orchard for adding custom shapes in Orchard Menus and Navigation. This will be released as a part of Orchard CMS 1.7, but I thought I would add it to my Orchard Tutorials now so Orchard Web Developers can prepare for it. This is all possible thanks to the pluggable navigation released in Orchard 1.5. I talked about the pluggable navigation some time ago in Dynamically Injecting Menu Items in Orchard CMS and Orchard Menus and Navigation for Online Store and E-Commerce Website.

Shape Link for Orchard Menus

When you browse to the Navigation Area in the Orchard Dashboard you will find a new Shape Link that allows you to add a custom shape to your Orchard Menus. Below is a quick image that I altered for ease of viewing.

Shape Link in Orchard Menus and Navigation

As you can see, I already added a Shape Link to my Orchard Main Menu, called Test. When you click the Add Button to add a Shape Link it looks like the following.

Custom Orchard Main Menu Shape Link

The Menu text can be used in the shape or completely disregarded. Ideally you would want to add the Menu text as the link in the menu, but this is completely optional even though the hint suggests otherwise. The name of the shape, however, is really important and must be available either as a file or shape you create programmatically. Most Orchard Web Developers will probably add the shape as a file in their theme's Views folder. The type of the shape to display is called "Test" in this case, so I add a Test.cshtml file in my theme's Views folder.

Custom Shape in Orchard Theme Views Directory Folder

Razor Code and View Model in Custom Orchard Shape

You can write any kind of Razor Code you want in the custom Orchard shape as well as use the rich Model passed to it. Here is some sample code that grabs the Menu text from the model and uses it as the text for the main link. I then go a bit further and add a simple dropdown menu. I am using the ThemeMachine for this example, of course. I have a blank slate here so I can render anything I want. Just make note that it renders within the menuitem container tag which by default is <li> unless you change it.

   var text = Model.MenuItem.Text;
<a href="#">@text</a>
    <a href="#">@text again</a>

The custom Shape Link in the Orchard CMS Main Menu will provide the following effect. Of course, the sky is the limit here.

Custom Orchard CMS Menu with Dropdown Navigation


Most Orchard Web Developers will find this new Shape Link in Orchard CMS very useful for injecting custom shapes into an Orchard Menu and Navigation. You can grab this from the latest Orchard Source Code now or wait for Orchard 1.7. Check out my other Orchard Tutorials on new features in Orchard 1.7:

Contact me if you need to hire an Orchard CMS Developer.