This project is read-only.

Simple navigation menu customization

Topics: Customizing Orchard
Oct 21, 2011 at 3:44 PM

Hi all,

I'm trying to customize my main menu items to have different styling depending on their order in the navigation menu.

Currently, all of my menu items are being outputted with the class "current". I'm hoping to have the following outcome:

Menu Item 1 - class "nav1"

Item 2 - class "nav2"

Item 3 - class "nav3" and so on.

This is my MenuItem.cshtml


    // odd formatting in this file is to cause more attractive results in the output.
    var items = (IEnumerable)Enumerable.Cast(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 ((!string.IsNullOrEmpty(modelUrl) && requestUrl.StartsWith(modelUrl)) || requestUrl == modelUrl) { 
    var tag = Tag(Model, "li");
    if (items.Any()) {
} @tag.EndElement } }

Any help or pointing me in the right direction would be greatly appreciated.



Oct 21, 2011 at 5:04 PM

You could use the technique explaoined in this article, only for menu: