How to use tabs

Topics: Administration
Apr 28, 2012 at 3:15 PM

Hey,

I was wondering how to use tabs in orchard, I want to create a menu on the left side and each menu item should have sub items displayed as tabs, does anyone know how to do that in Orchard?

Tx,

Borrie

Developer
Apr 28, 2012 at 3:22 PM

You can do so by implementing INavigationProvider. For example:

public class MyAdminMenu : INavigationProvider
    {
        public string MenuName {
            get { return "admin"; }
        }
 
        public AdminMenu() {
            T = NullLocalizer.Instance;
        }
 
        private Localizer T { get; set; }
 
        public void GetNavigation(NavigationBuilder builder) {
            builder
                
                // Image set
                .AddImageSet("webshop")
 
                // "Webshop"
                .Add(item => item
 
                    .Caption(T("Webshop"))
                    .Position("2")
                    .LinkToFirstChild(true)
                
                    // "Customers"
                    .Add(subItem => subItem
                        .Caption(T("Customers"))
                        .Position("2.1")
                        .Action("Index", "CustomerAdmin", new { area = "Orchard.Webshop" })
                    )
 
                    // "Orders"
                    .Add(subItem => subItem
                        .Caption(T("Orders"))
                        .Position("2.2")
                        .Action("Index", "OrderAdmin", new { area = "Orchard.Webshop" })
                    )
                );
        }
    }
}

For details, see: http://skywalkersoftwaredevelopment.net/blog/writing-an-orchard-webshop-module-from-scratch-part-10

Apr 28, 2012 at 3:28 PM

Skywalker,

Thanks for the fast reply!! I'm new to orchard so it seems a bit complicated but I'll give it a go! :)

Can I use that code on the frontend and throw away my top menu? Isn't there a way that I can dynamicly add pages to a kind of submenu that consists of tabs?

Borrie

Developer
Apr 28, 2012 at 5:21 PM

You're welcome :)

Ah, I assumed you wanted to create your own custom admin menu and tabs in the backend.
To do so from the front end is possible as well of course. What I'd do is install the AdvancedMenu module, then override the menu and menuitem views in your own theme.

Just have a look at AdvancedMenu's implementation to so how to do it.

Dec 30, 2013 at 10:58 PM
Does the AdvancedMenu module even work with Orchard any more? I've encountered several issues just getting it to install properly, and now when I try to run Orchard, I get multiple compile errors that lead me to believe that AM hasn't been actively working for a while now.

Is there an easy way to get INavigationProvider to work on the front-end? I'd really like to be able to have tabbed layout in the Content frame, similar to how .LocalNav() generates them on the back-end.

I've tried to step through the code in VM, but I'm not having much success figuring out where to dive in.
Jan 6, 2014 at 11:40 AM
Gregory,

You might wonna have a look at this theme TEXT

This theme uses tabs by default + it's already responsive :)

In 1.7 a lot has changed, customzing menu's is a lot easier

Borrie