Customizing the entire markup for the orchard cms navigation zone

Question

I've been searching high and low for the past couple of days for the file(s) in Orchard where I can customize the markup used for the navigation

Traversing the tree in the Designer Tool and looking at the template and HTML views doesn't help much seeing as the MenuItemLink renders the <li> in the HTML view but nothing renders it in the template view. So I am quite stumped.

The original markup is like so (Taken from the Designer Tools Zone [Navigation]):

<div class="zone zone-navigation">
    <article class="widget-navigation widget-menu-widget widget">
        <nav>
            <ul class="menu menu-main-menu">
                <li class="first">
                    <a href="/Orchard/work">Work</a>
                </li>
            </ul>
        </nav>
    </article>
</div>

What I need is to customize the classes on the <ul> and <li> elements, really. If possible I'd love to be able to customize it all so I didn't need the <div class="zone zone-navigation"> for example.

But is this even possible?

Churchwell

have you looked at this or this? – Poultry

Yes, none of your answers explains how to access the <li> element, although they are very informative :) – Churchwell

If you try doing what I've explained there, you will stumble upon how <li>s are rendered. Just under the Menu.cshtml there is a MenuItem.cshtml that you could modify. – Poultry

Thanks :) I guess I had stared at it for too long! – Churchwell

Answer 1

• <li> element is rendered by MenuItem shape (Core\Shapes\MenuItem.cshtml)
• <nav> and top <ul> elements are rendered by Menu shape (Core\Shapes\Menu.cshtml)
• <a> element is rendered by MenuItemLink shape (Core\Shapes\MenuItemLink.cshtml)

If you want to override the defaults, simply put appropriate Menu.cshtml, MenuItem.cshtml or MenuItemLink.cshtml files in your theme (or better - copy the default one(s) and alter). Those will be used then instead of the default ones I wrote about above.

Diversiform