Adding classes to the HTML wrapper around sub-menu items?

Topics: Writing themes
Dec 30, 2013 at 3:45 PM
I'm trying to add a second menu to a layout (to show on every page) with menu-items and sub-menu-items, and add appropriate classes for a bootstrap theme.

There are more div's in the layout that I am matching than in the menu structures created by orchard Navigation.

So I'm matching up with alternates and hoping to use wrappers where necessary.

But Orchard adds a <ul> tag to wrap all the sub-menu-items added to any top-level menu item.

Because this <ul> tag is not part of a shape or a template, there is no way to use an alternate, so it looks like it is already being generated by Orchard Navigation as a wrapper.

So can I get into this wrapper?

Or does this mean I should give in and write my own Navigation module?

I would of course prefer to use the Orchard Navigation process and just override the templates with alternates.

Thanks,
Dec 30, 2013 at 11:24 PM
If my understanding of what you are doing Is ok, there are no problems solving it with alternates in the area of menuItem and menuItemLink. Just adding the bootstrap classes when necessary on ul and li.
Dec 30, 2013 at 11:28 PM
There are two original templates for menus (that I'm aware of) containing
    tags:
    \Orchard.Web\Core\Shapes\Views\Menu.cshtml
    \Orchard.Web\Core\Shapes\Views\MenuItem.cshtml

You can verify if the ul tags coming from one of these by temporarily changing them in original files.


Dec 30, 2013 at 11:49 PM
Kassobasi,

You are correct, the ul tag is added to wrap the child MenuItemLink shapes in the MenuItem shape template.

I can provide an alternate for that template.

I had forgotten to look into the shapes module.

Thanks for yet another level of redirection!
Dec 30, 2013 at 11:49 PM
CSADNT,

Great!

I will move ahead with my plan for alternates and not be concerned that I have to create my own module.

Thank you for the encouragement.
Developer
Jan 2, 2014 at 4:03 AM
@kimballjohnson Better put those alternates in your theme without having to write a separate module for this (which would be an overkill). Copy/paste both mentioned files and just alter them to your needs.