Featuring Orchard Advanced Menu

Tags: orchard, module, menu

New Hierarchical Menu module release is finally here. As you probably noticed, the module name has changed to Advanced Menu, as I guess it’s more appropriate now. Why? This is basically what I’m about to write about, as there’s been a lot of changes since the last releaseUśmiech.

First and foremost – the module is prepared to work with the upcoming Orchard 1.1 release! The bad news about it is that it probably won’t work with the Orchard 1.0, because the new release introduces some breaking changes (e.g. different LocalizationString handling). Would there be a demand for backward compatibility, I’ll do my best to try adding that (I have to make some research if it’s possible at all first).

As the module takes part in the Orchard Module Challenge, I created a simple demo site, which shows it’s most powerful featuresUśmiech Check it out!

New features

Version 1.2 introduces many features not available in previous versions (in addition to changes to existing ones, which are described later in this article):

  • Custom menus– ability to create your own menus.
    • Easily create different menus for different purposes, e.g. separate the menus used for display and breadcrumb rendering
    • You can auto-fill the created menu with existing content items (Pages, Blogs, Lists etc.) with just a click of a button. There is also an option to include contained items (e.g. Blog posts, List items and such)
  • Styled menu widget – styled and scripted with Superfish jQuery library menu widget with color customization options. Works with all major browsers and degrades gracefully when JS is disabled
  • Templated menu items – you can put your own Html markup inside menu items
  • Visit counters – attach a visit counter to any displayable content type (attached to Page type by default)
    • Scoped – you can choose from three predefined counter scopes: PerSite, PerUser and PerSession
    • This is the flag use of the counting framework I created while rewriting the included RecentlySeenWidget (which now utilizes this). There’s way more than this, but this is clearly a topic for a different article.

When the Advanced Menu module is enabled, the default menu gets automatically replaced with StyledMenuWidget. So you don't have to create the first widget by hand, as it's already there! You can change it or replace from the Dashboard if you need to.


  • More menu and menu item rendering options
    • Optional wrapping of sub-items in additional <div> tags
    • Add optional subtitle to menu items
    • Hide/show menu item’s text
    • Render menu item as link (default) or just as a plain text
    • Limit the number of menu levels displayed with an option to cut or flatten to a single list the items below threshold
    • Specify which menu item children to use as a top level of a displayed menu. By default none, which means that the whole menu is rendered
  • Tweaks for easy styling/scripting
    • Unique Id attribute for each menu widget – each menu widget has a unique menu-<item_id>  HTML Id attribute to allow targeting specific menu with jQuery/CSS selectors. The item_id is menu widget’s content item Id.
    • Unique Id attribute for each counter – counter-<item_id>, analogous to the former
    • Additional CSS classes for counterscounter-<counter_scope>, where counter_scope is the scope used (“PerSite”, “PerUser” or “PerSession”).
  • Additional shape alternates for customization
    • Menu__[item_id], where item_id stands for MenuWidget/StyledMenuWidget content item Id. Example: Menu-33.cshtml
    • Breadcrumbs__[item_id] – where item_id is BreadcrumbsWidget content item Id. Example: Breadcrumbs-22.cshtml
    • Breadcrumbs__[menu_name] – where menu_name is the name of menu used to render BreadcrumbsWidget. Example: Breadcrumbs-main.cshtml
    • Counter__[counter_scope] – where counter_scope is counter scope used (“PerSite”, “PerUser” or “PerSession”). Example: Counter-PerSite.cshtml
    • Counter__[item_type] – where item_type is the name of content type the counter is attached to. Example: Counter-BlogPost.cshtml
    • Counter__[item_id] – where item_id stands for the Id of an item the counter is attached to. Example: Counter-11.cshtml
  • Lot of code refactoring


Plans for the next release (around mid/end-April 2011)

  • Editing content item menu associations on item edit/creation screen
  • Multi-column sub-items layout – dividing children into multiple lists
  • Menu item position auto-creation based on existing items
  • Menu item listing UI improvement and tweaks
  • Performance improvements by utilizing caching engine where possible
  • More styling options for StyledMenuWidget – borders, padding, margins, custom CSS, top menu level alignment (left/right/center)
  • Refactoring – group and divide the features into separate features - I just didn't have time to do this, as OMC deadline was nearby (and being left with the totally broken build few hours before wasn't the thing I dreamt ofUśmiech)


I hope you’ll find it useful in your Orchard projects! I’m going to update my blog to Orchard 1.1 as soon as it arrives to utilize this nice new feature. I’d be very glad for any feedback so I could make this module better and betterUśmiech


blog comments powered by Disqus