Change Sub menu

Topics: Customizing Orchard, Writing themes
Sep 7, 2012 at 3:21 PM
Edited Sep 10, 2012 at 8:33 AM

I am creating my 1st theme and I am having a few difficulties trying to get my menu and sub menus to have different styles

I have a main menu styled in Parts.MenuWidget.cshtml but I am really struggling to change the layout of my sub navigation.   The new Menu is called News and the menu widghet called NewsMenu and I am adding it on a layer also called News.  I have created an alternative called Widget-Name-NewsMenu.cshtml that I confirmed was correct with Shape Tracing.   

The problems I have is

  • How do i get my new alternate to display the news menu items with my own styling.  I am currently  deleting the @Display(Model.Content) a so that the alternate overrides the default not just adds to it but not sure how to get this working manually with correct menu items.

I tried to use Orchard Documentation on creating a custom theme and themes already in the Gallery as a guide.  Some themes have 2 or 3 different menu layouts in different sections. However they don't even have alternatives for the menus so was wondering how they are making menus appear different?  

Any advice or clues where to look would be greatly appreciated.

Sep 12, 2012 at 5:36 PM

Submenus are new to 1.5 so it's not surprising that themes would not take them into account. TheThemeMachine is probably your best best as a starting pint for this.

Apr 26, 2013 at 4:00 PM
Did you ever figure this out? I am trying to do the same thing on my website. I want the sub menu to have a different class then the top level menu.
Apr 26, 2013 at 4:28 PM
Edited Apr 26, 2013 at 4:29 PM
You'll need to override the MenuItem shape in your theme to do this.
    // odd formatting in this file is to cause more attractive results in the output.
    var items = Enumerable.Cast<dynamic>((System.Collections.IEnumerable)Model);
if (!HasText(Model.Text)) {
} else {
    string requestUrl = Request.Path.Replace(Request.ApplicationPath, string.Empty).TrimEnd('/').ToUpperInvariant();
    string modelUrl = Model.Href.Replace(Request.ApplicationPath, string.Empty).TrimEnd('/').ToUpperInvariant();
    if (requestUrl == modelUrl || (!string.IsNullOrEmpty(modelUrl) && requestUrl.StartsWith(modelUrl + "/"))) { 
    if(items.Any()) {
    var tag = Tag(Model, "li");
    @* morphing the shape to keep Model untouched*@
    Model.Metadata.Type = "MenuItemLink";
    if (items.Any()) {
        <ul class="newclassnamehere">
then you can target the list items with CSS
ul.newclassnamehere li { style definitions here }
Apr 26, 2013 at 4:34 PM
Actually, the default shape is already applying the class "dropdown" to any menu item that has children. If you're not using that class for anything else, you should be able to get to the submenu items directly with CSS
li.dropdown > ul > li { style definitions here }