How to get a minimalist navigation?

Topics: Core, Customizing Orchard, General
Apr 11, 2014 at 11:35 AM
Hi, I'm currently evaluating Orchard for a project I'm working on. Got 1.8 setup and running fine so far, however I've run into a bit of a problem when it comes to theming, especially the navigation.

In my Layout.cshtml I define the place the navitation widget is placed:
<nav class="header-nav">
    @Display(Model.Navigation)
</nav>
I have a 3 leveled navigation structure with the first two levels being html content and the third level containing content links. Like this:
Alpha
    Alice
        Page #1
        Page #2
    Bob
        Page #3
Beta
    Charlie
        Page #4
This example will then look like this on the page:
<nav class="header-nav flex-row flex-no-resize flex-space-between flex-middle">
    <div class="zone zone-navigation">
        <article class="widget-navigation widget-menu-widget widget">
            <nav>
                <ul class="menu menu-example">
                    <li class="dropdown first">
                        <span class="raw"><p>Alpha</p></span>
                        <ul>
                            <li class="dropdown">
                                <span class="raw"><p>Alice</p></span>
                                <ul>
                                    <li>
                                        <a href="/OrchardLocal/en/page1">Page #1</a>
                                    </li>
                                    <li>
                                        <a href="/OrchardLocal/en/page2">Page #2</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <span class="raw"><p>Bob</p></span>
                                <ul>
                                    <li>
                                        <a href="/OrchardLocal/en/page3">page #3</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown last">
                        <span class="raw"><p>Beta</p></span>
                        <ul>
                            <li class="dropdown">
                                <span class="raw"><p>Charlie</p></span>
                                <ul>
                                    <li>
                                        <a href="/OrchardLocal/en/page4">Page #4</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </article>
    </div>
</nav>
This is bad in several ways, I think.
Firstly it generates an uncessesarily deep structure with the:
 <div class="zone zone-navigation">
        <article class="widget-navigation widget-menu-widget widget">
            <nav>
at the start. I would very much like to get rid of that.

Secondly I don't want to use an unordered list at all. Instead I want to use "empty" <a> for the first level items, encapsulate the 2nd+3rd level items in a <div> with a specific class name and give the 3rd level items some additional classes on top of that. Something like this (for for example):
<nav class="header-nav">
<a class="header-nav_1st-lvl">Alpha</a>
    <div class="header-nav_2nd-lvl">
    <u>Alice</u>
        <a href="#">Page #1</a>
        <a href="#">Page #2</a>
    </div>
    <div class="header-nav_2nd-lvl">
    <u>Bob</u>
        <a href="#">Page #3</a>
    </div>
<a class="header-nav_1st-lvl">Beta</a>
    <div class="header-nav_2nd-lvl">
    <u>Charlie<u>
        <a href="#">Page #4</a>
    </div>
</nav>
Simply putting the navigation widget into my layout obviously doesn't give me the level of control over the design I want/need.

Where in the code do I have to make adjustments to define the code structure I want?
(I would be perfectly happy with the ability to recursivly output raw element name and content/link in a razor loop in the actual Layout file - if that is an easy/preferable option)

Thanks for your time and help.
Apr 11, 2014 at 1:48 PM
After some more researching I found a way to get (pretty much) what I wanted.
I'm posting my solution here, maybe it'll help somebody else who has a similar problem:

I created a Menu.cshtml in my theme's /Views/ directory with the following code:
@{
    // Model is Model.Menu from the layout (Layout.Menu)

    <nav class="header-nav">
            @{
                foreach (var item in Model.Items)
                {
                        <a class="header-nav_1st-lvl">@item.Text</a>
                        <div class="header-nav_2nd-lvl">
                            @foreach (var item_2nd in item.Items)
                            {
                                    <u>@item_2nd.Text</u>
                                    @foreach (var item_3rd in item_2nd)
                                    {
                                        <a href="@item_3rd.Href">@item_3rd.Text</a>
                                    }
                            }
                        </div>
                }
            }
    </nav>
}
I still have the
<div class="zone zone-navigation">
        <article class="widget-navigation widget-menu-widget widget">
in the code, but that's neglegtable right now.
Marked as answer by Konadi on 4/14/2014 at 12:31 AM
Jul 2, 2014 at 9:03 PM
Konadi,

Thanks for the post! I think is has saved me some work for a similar implementation.
K.E.