Customizing Sub Menu in Navigation

Topics: Customizing Orchard, General
Apr 26, 2013 at 5:05 PM
I have made my own custom theme in orchard. I have been able to customize my own navigation but I can not give the sub menu a different class then the top level menu. Is there a way to give the sub menu different styling then the top menu?
Apr 26, 2013 at 5:20 PM
You can do it pretty easily with CSS, but it would depend on what your menu looks like

I override the Menu.cshtml shape in my theme so that I can add a class to the <ul> tag
@{
    // Model is Model.Menu from the layout (Layout.Menu)
    Model.Classes.Add("nav");
    var tag = Tag(Model, "ul");

    var items = (IList<dynamic>)Enumerable.Cast<dynamic>(Model.Items);

    if (items.Any()) {
        items[0].Classes.Add("first");
        items[items.Count - 1].Classes.Add("last");
    }    
}
@tag.StartElement
    @* see MenuItem shape template *@
    @DisplayChildren(Model)
@tag.EndElement
I also override the MenuItem.cshtml shape so that I can add classes to any top level <li> item that has children and the child <ul> item
@{
    // odd formatting in this file is to cause more attractive results in the output.
    var items = (IEnumerable<dynamic>)Enumerable.Cast<dynamic>(Model);
    dynamic user = WorkContext.CurrentUser.ContentItem;
    List<string> roles = user.UserRolesPart.Roles;
}
@{
    if (!HasText(Model.Text)) {
        @DisplayChildren(Model)
    }
    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) {
            Model.Classes.Add("active");
        }
        if (items.Any()) {
            Model.Classes.Add("dropdown");
        }
        var tag = Tag(Model, "li");
    @tag.StartElement
            
@* morphing the shape to keep Model untouched*@
        Model.Metadata.Alternates.Clear();
        if (Model.Parent.MenuName.ToString() == string.Empty) {
            if (items.Any()) {
                Model.Metadata.Type = "MenuItemLinkdd";
            }
            else {
                Model.Metadata.Type = "MenuItemLink";
            }
        }
        else {
            if (items.Any()) {
                Model.Metadata.Type = "MenuTopItemLinkdd";
            }
            else {
                Model.Metadata.Type = "MenuTopItemLink";
            }
        }

        @Display(Model)

        if (items.Any()) {
    <ul class="dropdown-menu">
        @DisplayChildren(Model)
    </ul>
        }
    @tag.EndElement
    }
}
then I can target these with CSS
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
    color: #555555;
    /* background-color: #373737; */
    background-color: #005f8f;
    outline: 0;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}

/* submenu dropdown placement*/
.dropdown .dropdown:hover > .dropdown-menu { display: block; margin-left: 201px !important; margin-top: -31px !important; }
.dropdown .dropdown .dropdown:hover > .dropdown-menu { display: block; margin-left: 201px !important; margin-top: -31px !important; }
The above is using Bootstrap for the dropdowns, so the class definitions might be a bit different, but hopefully this gives you an idea.
Apr 26, 2013 at 5:27 PM
I want to give the sub menu a class that is already in my CSS. The CSS is provided by the customer. And the Class they use is on the <a href> tag.
Apr 26, 2013 at 5:45 PM
The <a> tag in Orchard is all the way down on the MenuItemLink shape. You can add a class to the <a> tag here if you override that shape, but you'd need to make sure that your CSS definition looks higher to determine if that <a> tag is in a submenu. If you didn't override the Menu or MenuItem shape, you could do it with a different MenuItemLink shape and the following CSS
li.dropdown > ul > li > a.newclassname
otherwise if you override the Menu or MenuItem shape and add classes to those items, you can target it a little more specifically.
Apr 26, 2013 at 6:32 PM
Here is the template for how the menu needs to be.
header role="banner">
<div id="skip_to_content"><a href="#main_content">Skip to Main Content</a></div>
<div class="phone_hdr">
<div class="phone_hd_left"><a onclick="toggle_menu();" class="p_h_button p_h_menu"><img alt="Menu" src="/Themes/EMSA/Content/Images/clear.gif" /></a></div>
<div class="phone_hd_right"><a class="p_h_button p_h_contact" href="/Contact.html"><img alt="Contact Us" src="/Themes/EMSA/Content/Images/clear.gif" /></a> <a onclick="toggle_search();" class="p_h_button p_h_search"><img alt="Search" src="/Themes/EMSA/Content/Images/clear.gif" /></a></div>
<div class="logo_and_banner">
<div class="head_cagov_logo"><a href="http://www.ca.gov/"><img alt="CA.gov" src="/Themes/EMSA/Content/Images/header_ca.gov.png" /></a></div>
<div class="head_organization_banner"><a href="/"><img alt="Organization Title" src="/Themes/EMSA/Content/Images/header_organization.png" /></a></div>
</div>
</div>
<div id="head_search"><form id="local_form" action="http://www.google.com/cse"><!-- the form action will be changed using javascript -->
<div class="textfield_container"><label class="hidden" accesskey="s" for="search_local_textfield">Search this site: </label><input onfocus="if(this.value=='Search')this.value=''" onblur="if(this.value=='')this.value='Search'" id="search_local_textfield" size="40" value="Search" name="q" autocomplete="off" type="text" /> <input type="hidden" value="001779225245372747843:mdsmtl_vi1a" name="cx" /> <!-- Step 6: Update this value with your search engine unique ID. Submit a request to the OTech Service Desk if you don't already know your unique search engine ID. --><input type="hidden" name="cof" /> <!-- this value will be set using javascript --><input type="hidden" value="UTF-8" name="ie" /> <input type="hidden" value="1" name="nojs" /></div>
<div class="submit_container clearfix"><input title="Search" alt="Search" src="/Themes/EMSA/Content/Images/clear.gif" type="image" name="submit" /></div>
</form></div>
<nav id="navigation" class="megadropdown">
<ul id="nav_list">
<li><a class="nav_level1_link" href="/"><span id="nav_home_container"></span><img alt="Home" src="/Themes/EMSA/Content/Images/clear.gif" />&nbsp;</a></li>
<li><a class="nav_level1_link" href="/sample1/">EMS Systems</a>
<div class="nav_panel">
<ul>
<li><a class="nav_p_heading" href="http://emsa.technicate.com/quality-improvement">Quality Improvement</a>
<div class="nav_p_description">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</li>
<li><a class="nav_p_heading" href="http://emsa.technicate.com/cemsis">CEMSIS</a>
<div class="nav_p_description">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</li>
<li><a class="nav_p_heading" href="/">EMS for Children</a>
<div class="nav_p_description">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</li>
</ul>
<ul>
<li><a class="nav_p_heading" href="/">Communications</a>
<div class="nav_p_description">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</li>
<li><a class="nav_p_heading" href="/">Speciality</a>
<div class="nav_p_description">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</li>
<li><a class="nav_p_heading" href="/">Trauma</a>
<div class="nav_p_description">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</li>
</ul>
<ul>
<li><a class="nav_p_heading" href="/">Transportation</a>
<div class="nav_p_description">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</li>
<li><a class="nav_p_heading" href="/">EMS Planning</a>
<div class="nav_p_description">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</li>
</ul>
<div class="nav_d_arrow_container"></div>
</div>
</li>
<li><a class="nav_level1_link" href="/sample2/">EMS Responders</a>
<div class="nav_panel">
<ul>
<li><a class="nav_p_heading" href="/">First Aid/CPR</a>
<div class="nav_p_description">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</li>
<li><a class="nav_p_heading" href="/">Defibrillation</a>
<div class="nav_p_description">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</li>
<li><a class="nav_p_heading" href="/">EMT</a>
<div class="nav_p_description">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</li>
</ul>
<ul>
<li><a class="nav_p_heading" href="/">Advanced EMT</a>
<div class="nav_p_description">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</li>
<li><a class="nav_p_heading" href="/">Paramedic</a>
<div class="nav_p_description">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</li>
</ul>
<ul>
<li><a class="nav_p_heading" href="/">Tactical Medicine</a>
<div class="nav_p_description">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</li>
<li><a class="nav_p_heading" href="/">Trial Studies</a>
<div class="nav_p_description">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</li>
<li><a class="nav_p_heading" href="/">Local Scope of Practice</a>
<div class="nav_p_description">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</li>
</ul>
<div class="nav_d_arrow_container"></div>
</div>
</li>
Apr 26, 2013 at 6:35 PM
Edited Apr 26, 2013 at 6:50 PM
Here is what I have done so far:

this is my Menu.cshtml:
@{
    // Model is Model.Menu from the layout (Layout.Menu)
    var tag = Tag(Model, "ul");

    var items = (IList<dynamic>)Enumerable.Cast<dynamic>(Model.Items);

    if (items.Any()) {
        items[0].Classes.Add("");
        items[items.Count - 1].Classes.Add("");
    }    
}

    
    <header role="banner">
<div id="skip_to_content"><a href="#main_content">Skip to Main Content</a></div>
<div class="phone_hdr">
<div class="phone_hd_left"><a onclick="toggle_menu();" class="p_h_button p_h_menu"><img alt="Menu" src="/Themes/EMSA/Content/Images/clear.gif" /></a></div>
<div class="phone_hd_right"><a class="p_h_button p_h_contact" href="/Contact.html"><img alt="Contact Us" src="/Themes/EMSA/Content/Images/clear.gif" /></a> <a onclick="toggle_search();" class="p_h_button p_h_search"><img alt="Search" src="/Themes/EMSA/Content/Images/clear.gif" /></a></div>
<div class="logo_and_banner">
<div class="head_cagov_logo"><a href="http://www.ca.gov/"><img alt="CA.gov" src="/Themes/EMSA/Content/Images/header_ca.gov.png" /></a></div>
<div class="head_organization_banner"><a href="/"><img alt="Organization Title" src="/Themes/EMSA/Content/Images/header_organization.png" /></a></div>
</div>
</div>
<div id="head_search"><form id="local_form" action="http://www.google.com/cse"><!-- the form action will be changed using javascript -->
<div class="textfield_container"><label class="hidden" accesskey="s" for="search_local_textfield">Search this site: </label><input onfocus="if(this.value=='Search')this.value=''" onblur="if(this.value=='')this.value='Search'" id="search_local_textfield" size="40" value="Search" name="q" autocomplete="off" type="text" /> <input type="hidden" value="001779225245372747843:mdsmtl_vi1a" name="cx" /> <!-- Step 6: Update this value with your search engine unique ID. Submit a request to the OTech Service Desk if you don't already know your unique search engine ID. --><input type="hidden" name="cof" /> <!-- this value will be set using javascript --><input type="hidden" value="UTF-8" name="ie" /> <input type="hidden" value="1" name="nojs" /></div>
<div class="submit_container clearfix"><input title="Search" alt="Search" src="/Themes/EMSA/Content/Images/clear.gif" type="image" name="submit" /></div>
</form></div>
<nav id="navigation" class="megadropdown">
  <ul id="nav_list">
      <li><a class="nav_level1_link" href="/"><span id="nav_home_container"></span><img alt="Home" src="/Themes/EMSA/Content/Images/clear.gif" />&nbsp;</a></li>

        @* see MenuItem shape template *@
        @DisplayChildren(Model)
      </ul>
    
        
</nav>
<div id="img_ribbon"><br />&nbsp;</div>
</header>
This is my menu item:
@{
    // 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)) {
    @DisplayChildren(Model)
} 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 + "/"))) { 
        Model.Classes.Add("");
    }
    if(items.Any()) {
        Model.Classes.Add("dropdown");
    }
    var tag = Tag(Model, "li");
    @tag.StartElement
            
    @* morphing the shape to keep Model untouched*@
    Model.Metadata.Alternates.Clear(); 
    Model.Metadata.Type = "MenuItemLink";
    @Display(Model)
    
    if (items.Any()) {
        <div class="nav_panel">
        <ul>
        @DisplayChildren(Model)
        </ul>
            </div>
    }
    @tag.EndElement
    }
}
Then finally my MenuItemLink-ContentMenuItem.cshtml
@using Orchard.ContentManagement
@{
    ContentItem contentItem = Model.Content.ContentItem.ContentMenuItemPart.Content;
}
  
@if (contentItem != null) {
    

 <a class="nav_level1_link" href="@Model.Href">@Model.Text</a> 
    

}
I need the sub menu to have the <a> tag class to be different
When I just hard coded that whole thing It works and the CSS knows to change the sub menu. But I obviously can't have a hard coded navigation.
Apr 26, 2013 at 6:54 PM
I would modify your MenuItem shape and change Model.Metadata.Type = "MenuItemLink"; to
        if (Model.Parent.MenuName.ToString() == string.Empty) {
            Model.Metadata.Type = "SubMenuItemLink";
        }
        else {
            Model.Metadata.Type = "MenuItemLink";
        }
Then copy your MenuItemLink shape and name it SubMenuItemLink. Change the class on the <a> tag in this shape and it should only get used on submenu items.
Apr 26, 2013 at 7:17 PM
Edited Apr 26, 2013 at 7:19 PM
Well tried this and got this error:
I copied the MenuItemLink-ContentMenuItem.cshtml and made a SubMenuItemLink-ContentMenuItem.cshtml and changed the <a> tag. But looks like it does not recognize the SubMenuItem

Image
Apr 26, 2013 at 7:32 PM
try naming the shape without "-ContentMenuItem" and see what happens
Apr 26, 2013 at 7:39 PM
Ok,, now I get this error:

Image

Thanks for your help by the way. I am brand new with Orchard. This is the first site I am trying to create with it.
Apr 26, 2013 at 7:48 PM
yep...now that I think about it, removing "-ContentMenuItem" wouldn't work because it would override submenu items that are Custom Link menu items, not Content menu items.

The way I'm doing it, I'm rendering a different MenuItemLink template for Custom Link menu items.

I'm not sure how you would specify a different "MenuItemLink-ContentMenuItem" template by name. Perhaps one of the Orchard gurus can suggest something?
Apr 26, 2013 at 7:55 PM
Is there a way on the "MenuItemLink" to use an if statement that says which one to use?
For example
if(SubMenu)
{
<a class="nav_p_heading" href="@Model.Href">@Model.Text</a>
}else{
<a class="nav_level1_link" href="@Model.Href">@Model.Text</a>
}
Apr 26, 2013 at 8:01 PM
I'm pretty sure at the MenuItemLink template level, there's nothing to reference to figure out what level you're at.

Modifying the class name at this level is very difficult. That's why it's definitely easier to use the same class name and target it with CSS if at all possible. Any chance you can get your client to modify the CSS?
Apr 26, 2013 at 8:05 PM
Edited Apr 26, 2013 at 8:06 PM
Oh wait...

Try it with both templates. Copy MenuItemLink from Orchard.Core and MenuItemLink-ContentMenuItem from Orchard.Core and add "Sub" to the beginning of each one. Then modify the class name on the <a> tag (in both templates).

You have to account for menu items that are both Custom Link AND Content Menu items. The MenuItem shape looks for the template by name regardless of what type of menu item it is.
Apr 26, 2013 at 8:17 PM
Ok, I coped the MenuItemLink for the Core to my theme. Then added Sub to that one. Now I have SubMenuItemLink.cshtml and SubMenuItemLink-ContentMenuItem.cshtml. Plus the MenuItemLink-ContentMenuItem.cshtml.
Looks like it worked.

Thank you very much!!!! You are Awesome!!! I have been trying to figure this out since yesterday.

Do you know if it is possible to show Tags under that submenu item and use that as a description for that submenu link?
Apr 26, 2013 at 8:26 PM
If you're referring to the Orchard.Tags module tags, you could try adding the "Tags" Content Part to the "Custom Link" and "Content Menu Item" Content Types. I've never tried it, so I'm not sure what will do or how to even reference it. You'd probably have to do something in Placement to render them and then possibly use CSS for placement.

That's definitely a unique situation that I've never tried.
Apr 26, 2013 at 8:32 PM
They want to be able to add a description underneath the link. So it would look something like this.

SubNavLink
This is a description

SubNavlink
This is a description

I am not sure how to add that on there for the customer to easily add content with a description for their sublinks. That is why I thought that maybe they could just write a description in the Tags field on the content page and have that display under the SubNaviation link.
Apr 26, 2013 at 8:38 PM
This is a sample of what they want it to look like

Image
Apr 26, 2013 at 8:54 PM
ahhh...San Francisco. I live in Sacramento =)

hmmm...ever considered creating a widget layer based on the url and adding that information to an HTML widget and placing it in one of the zones at the top like BeforeMain or Featured? Your client could easily edit the widget.

So EMS Responders would take you to a page such as ~/EMS-Responders. You create a widget layer and add a rule for it such as url("~/EMS-Responders") or url("~/EMS-Responders/*") so you can catch everything underneath it. Then add the HTML widget to a zone on that layer and just statically code those items.

You would just create a widget layer for each menu item.

It would be the easier way to do it.
Apr 26, 2013 at 9:00 PM
Edited Apr 26, 2013 at 9:04 PM
Ha, I actually live in Sacramento area also, small world.

So are you saying to add another widget to the zone underneath the submenu links?
Apr 26, 2013 at 9:07 PM
Maybe I'm not seeing the page design right. Is that entire block with the 6 links the submenu that appears when you click on EMS Responders?

If so, what about using an HTML Menu Item and rendering all 6 links in a single HTML Menu Item under EMS Responders?
Apr 26, 2013 at 9:13 PM
They appear when you hover over the top menu. Here is what it looks like normal:

Image
Apr 26, 2013 at 9:31 PM
Edited Apr 26, 2013 at 9:35 PM
I would definitely try the HTML Menu Item approach. Looks like it might be a lot easier to render it the way you want.

The only other thing I can think of doing is adding some dynamic code to MenuItemLink that reads the menu title and renders something different based on what's there. I did this once to add icons next to each menu item.
@using Orchard.ContentManagement
@{
    ContentItem contentItem = Model.Content.ContentItem.ContentMenuItemPart.Content;
}

@if (contentItem != null) {
    <a href="@Model.Href">@Model.Text</a><br />
    <span>@(Model.Text.ToString() == "DHV" ? "DHV description" : Model.Text.ToString() == "Response" ? "Response description" : string.Empty)</span>
}
The only catch with doing it this way is you have to make sure your menu text is unique for each item.
UPDATE: forgot you have to add .ToString() to Model.Text
Apr 26, 2013 at 10:02 PM
Ill try that out and see if that will work too. I want to make it as simple as possible for the customer to be able to add all this content without messing anything up.
Apr 26, 2013 at 10:41 PM
Ok I tried this but it only shows the Menu text, not what is written in the body.

What is DHV? Can you explain the code between the <span> tags?
Apr 26, 2013 at 10:47 PM
"DHV" is your menu item text. Basically you're checking the menu item text and depending on what it is, you displaying hard coded description text. It's just an if/then statement, but using the short java-like method.
Apr 26, 2013 at 10:55 PM
Ok, should I put it on the SubMenuItemLink, or the MenuItemLink? I tried putting it on both. It did not display the body part of the html widget. It only displayed the Menu Text.
Apr 26, 2013 at 11:17 PM
argh...lost my reply and have to start over

I'm confused as to which method you're using now.

Are you using an HTML Menu Item and laying out the HTML for all 6 links under "EMS Responders" in that one HTML Menu Item?

Or are you still creating individual Content Item menu items for those 6 links and rendering them with the SubMenuItemLink?

Remember that Orchard will use a different shape based on the Content Type. So an HTML Menu Item has a completely different shape from MenuItemLink and MenuItemLink-ContentMenuItem
Apr 29, 2013 at 3:56 PM
Ok, so the HTML link uses a different Shape? That explains why when I added that code to the Menu Item link that it didnt work. Ill have to try and find that other shape for Html Menu item.
Apr 29, 2013 at 7:01 PM
I have not been able to get this to work. It either displays the description or displays the menu text. It will not display both.
Apr 30, 2013 at 9:20 PM
Create a Custom Link Menu Item with the name you want to appear in the top navigation bar. Then create a HTML Menu Item with the sublinks and place it as a child of the Custom Link Menu Item. The URL of the Custom Link Menu Item doesn't matter because it won't link anywhere...it's just used to show to the HTML Menu Item underneath it. Be sure to give it a unique URL though in case your navigation is using a class to highlight active items.


EMS RESPONDERS (custom link)
      EMS RESPONDERS SUBMENU (html menu item)
Apr 30, 2013 at 9:32 PM
I finally was able to get it to work late yesterday. I got it to work using the Html Menu Item. I created a MenuItemLink-HtmlMenuItem.cshtml and added the following code:
<a class="nav_p_heading" href="@Model.Text">@Model.Text.ToString().Replace("_", " ")</a><br>
<div class="nav_p_description" style="margin-top: -13px;"><span class="raw">@Html.Raw(Model.Content.BodyPart.Text)</span></div>
Here is what it looks like now:
Image


This created the sub menus the way I needed them. I used content menu items for the top level navigation and Html Menu items for the sub navigation. Thank you very much for your help.
Apr 30, 2013 at 9:42 PM
Now I just have to figure out why it add a header on everything that I add to the home page. Any widget or content that is on the home page had a header on it.
Apr 30, 2013 at 11:14 PM
Edited Apr 30, 2013 at 11:20 PM
I believe that's standard rendering with Orchard Widgets and Content Items. If your theme has styling added to the <header> tag, I had to undo that styling for anything in the body using additional styling. For example, my main content is contained within a div with an id of "main-content". I added the following to remove any styling I had defined for <header>
#main-content header { remove any styles here }
just be sure to put it after your header{} style definition.
May 1, 2013 at 10:13 PM
What is confusing is that it only happens on the home page. It doesnt matter what page I set for the home page it always does that for the home page.

So are you saying I need to modify the CSS to make it not show the extra headers on everything?
Coordinator
May 1, 2013 at 10:57 PM
Jumping in the thread. Can someone give me a summary of the issue or how things should be improved ?
May 1, 2013 at 11:05 PM
It is difficult to give a different classes to parts of the navigation if you want to have sub menu with different styling. I do not know if I would have figured this out without the help of psenechal.
It would be nice to have a better set directions for people that want to create their own theme with orchard. Orchard is very powerful but there is a large learning curve to it.

Now that I finally have figured out my navigation problem I still can not figure out why my home page acts different from all my other pages.
May 1, 2013 at 11:19 PM
I think the bigger issue in this case was you having to conform to your customers preexisting stylesheet where the class name for the submenu was on the anchor tag (<a>) instead of the list item (<li>) or the list (<ul>). If the class is applied at a higher level than the anchor tag, it becomes easier to style...especially when you have control over the styling yourself instead of depending on someone else's definitions.

Other than having to define my own shapes to change the class name applied to the list items, I think the navigation works pretty well. The only suggestion I have is maybe setting up the navigation to allow a custom class definition on each menu item, configured through the Navigation system in Orchard...that way the user doesn't have to mess with overriding the menu shapes.

I haven't looked, but I'm wondering if there's already a module that would allow you to do that already (perhaps Vandelay.Classy?) It could be built into Core though if you guys think it's a worthwhile addition. Just my $.02
May 1, 2013 at 11:28 PM
btw...I create my own menu shapes because I want themes to be able to be used without installing additional modules. So while there are possible solutions using other modules, I don't want to have to install them just to get my theme looking the way I want it. Then again...adding this type of functionality to Core would still require the user to set the class in the navigation and would take away control of it from my theme...so I would most likely still use custom shapes even if this functionality did exist.
Dec 17, 2013 at 11:44 AM
Hello everybody!

This is my suggestion.
This part of code from MenuItem.cshtml:
@* morphing the shape to keep Model untouched*@
    Model.Metadata.Alternates.Clear();
    Model.Metadata.Type = "MenuItemLink"; 
By default Model.Metadata.Type is "MenuItem". I suppose it sets by Stereotype property of Content Type(look at Content Menu Item).
I tried to change this value, but nothing happened. The Model.Metadata.Type was still "MenuItem".

It would be great if we can set Model.Metadata.Type by property of Content Type.
Then we can create a "Submenu content item" and create a view.

Sorry if I mistaken.