How can I create a localNav style tabbed layout on a page

Question

I want to have a page that has two tabs, and I can see how to do this in AdminMenu.cs using LocalNav() BUT I need this on a third level item.

My page structure is

Admin Menu

My module
- Content Item 1
  - Tab 1
  - Tab 2
- Content Item 2
  - Tab 1
  - Tab 2

I can't get these to appear as it only seems to support having tabs off the "my module" link, and not the lower level links.

Is there another way to display the tabbed interface on my "content item 1" and "content item 2" pages?

Can you please clarify your question? It's hard to understand what you are trying to do. — Bertrand Le Roy, Nov 30 '13 at 09:50
in the end I readjusted my page layout so that I didn't run into needing a "third" level using tabs. Sorry for the delay in reply I don't seem to be getting notifications! — zanther, Mar 25 '14 at 10:39

score 0 · Answer 1 · answered Dec 10 '13 at 00:40

I don't believe there is a way to do this using Orchard's Navigation provider alone. I've done something similar, but I had to handle the tertiary level separately, and implement the menu UI myself from my own controller.

You will still need to add the third level in your module's Navigation Provider, as this will then mark the LHS menu and Tab selections correctly. Something along the lines of:

namespace Company.MyModule {
    public class TileSortAdminMenu : INavigationProvider {

        private Localizer T { get; set; }

        public string MenuName { get { return "admin"; } }

        public void GetNavigation(NavigationBuilder builder) {

            builder
                .AddImageSet("mymodule")
                .Add(T("My Module"), "5", menu => menu
                    .LinkToFirstChild(true)
                    .Add(T("Content Item 1"), "1", item => item
                        .LocalNav()
                        .LinkToFirstChild(true)
                        .Add(T("Tab 1"), "1", tab => tab
                            .LocalNav()
                            .Action("Index", "MyModuleAdmin", new { area = "Company.MyModule"})
                        )
                        .Add(T("Tab 2"), "2", tab => tab
                            .LocalNav()
                            .Action("Tab2", "MyModuleAdmin", new { area = "Company.MyModule"})
                        )
                    )
                    .Add(T("Content Item 2"), "2", item => item
                        .LocalNav()
                        .LinkToFirstChild(true)
                        .Add(T("Tab 1"), "1", tab => tab
                            .LocalNav()
                            .Action("ContentItem2Tab1", "MyModuleAdmin", new { area = "Company.MyModule"})
                        )
                        .Add(T("Tab 2"), "2", tab => tab
                            .LocalNav()
                            .Action("ContentItem2Tab2", "MyModuleAdmin", new { area = "Company.MyModule"})
                        )
                    )
                );
        }
    }
}

In your View, you can maintian Orchard's styling by using something like:

<ul class="localmenu localmenu-submenu">
    <li class="selected"><a href="@Url.Action("Index", "MyModuleAdmin", new { area = "Company.MyModule"})">Tab 1</a<</li>
    <li><a href="@Url.Action("Tab2", "MyModuleAdmin", new { area = "Company.MyModule"})">Tab 2</a></li>
</ul>

Where the class localmenu-submenu is a styling hook for your own style tweaks, and you add the class selected to whichever tab you're viewing.

Alternatively, depending on what you're trying to achieve, you could just implement jQuery UI's Tabs (available through the Orchard.jQuery resource manifest), and just update the styling to look Orchard-y.

How can I create a localNav style tabbed layout on a page

1 Answers1