Orchard CMS Navigation - Admin Menu and LocalNav

This is another quick Orchard CMS Tip. The other day while building a custom Orchard Module for a client I wanted a tabbed navigational interface in the administrative dashboard. If you're an Orchard Web Developer, you have seen the tabs when choosing Content, Modules, or Themes from the dashboard's administrative menu. The tabs, which are referred to as Local Navigation items, provide a nice UI in the dashboard that allows one to easily switch between groups of related items. In this quick Orchard Tutorial, I will show you how to create those tabs in your custom Orchard Modules during the navigation building process.

Orchard Navigation and Local Navigation Items

First, lets make sure we agree on the tabbed interface in question! When you choose "Modules" from the Orchard Administrative Menu it displays four tabs: Features, Installed, Gallery, and Updates. These four tabs are local navigation items giving you the ability to easily view the various modules installed or available to your Orchard Website. These tabs are very useful for organizing related information in your own custom modules and is the subject of today's Orchard Tip!

AdminMenu.cs and LocalNav()

If you desire to add items to Orchard's Administrative Menu for your custom module, you create an AdminMenu.cs file, AdminMenu class that implements INavigationProvider, and write C# code that adds various menu items to NavigationBuilder.

Sometimes, however, you want these menu items to only be local navigation items to display as tabs! This is where the handy, dandy LocalNav() fluent interface method comes into play. By specifying LocalNav() on the menu item you get a tab to help organize related content on your admin page.

Here is some abbreviated code using the LocalNav() option to create the 3 tabs of a Custom Calendar Orchard Module: Month, Week, and Day. Notice that LocalNav() is used at the end of the menu declaration to specify these menu items should be created as tabs on the administrative page.

public void GetNavigation(NavigationBuilder builder) {
  builder.AddImageSet("calendar")
    .Add(T("Calendar"), "7", menu => menu.Action(...})
      .Add(T("Month"), "0", item => item.Action(...}).LocalNav())
      .Add(T("Week"), "1", item => item.Action(...).LocalNav())
      .Add(T("Day"), "2", item => item.Action(...).LocalNav()));
}

When you enable your custom Orchard Module you will see a Calendar Menu Option on the administative menu. When Calendar is clicked, there will now be 3 tabs on the admin page displaying Month, Week, and Day!

Conclusion

And there you have it! Now you can create a nice tabbed interface for your custom Orchard Modules. Just add the LocalNav() option when adding menu items to NavigationBuilder as part of the administrative menu building process in Orchard CMS!