Hi Matt,

this is possible, but then we will need to know your way of how your content structure is build in the backoffice and how you want it to become.

Can you give us more details about this or even screenshots?

Thanks!

/Michaël

Hi Matt,

the meganav package is really usefull for this kind of tasks, what's the reason not to use 3th party tools?

/Michaël

Hi Matt,

You can do it yourself, but the way you describe makes me wondering why spent time on it when there is a package for it?

If you really want to make it yourself you need to find a way of making it transparent for other users.

1. Make a Menu doc type with a content picker ( which allows you to pick a content node from your content section )
2. Set this Menu doc type to allow children of the same Menu doc type
3. Make a root content node Menu Structure which contains the menu items structure
4. Make a partial which renders the menu structure using the descendants of the Menu Structure node

Hope this helps!

/Michaël

Hi Matt,

There isn't a tutorial but the following is a rough guide that I hope can help you get started.

Step 1 - Creating initial document types

1. I would create a folder called Nested content in the document types section in Umbraco (found in Settings).
2. In this folder I could create 3 document types (without templates). Menu Item Base , Menu Item Label, and Menu Item Link. On Menu Item Label and Menu Item Link add a tab called Content and a property called Label (or something similar).
3. Set both Menu Item Label and Menu Item Link to have a composition of Menu Item Base

Step 2 - Create the nested content based data type

1. Goto the Data Types node in the Developer section of Umbraco and create a folder called "Nested Content" (You don't have I just think it is better to group things together).
2. Create a new Data Type, I'd call it Menu Builder. From the drop down of property editors, pick Nested Content.
3. Add two document types to the options, these document types are our Menu Item Label and Menu Item Link. For each select the Content tab and in the label field add {{label}} (assuming you called the property label).

Step 3 - Finish off your document types

1. So, here we want to edit our Menu Item Base document type, add a tab called "Content" (same name as the tab on both the Menu Item Link and Menu Item Label document types. Add a property called "Submenu" of type "Menu Builder" (Our nested content menu builder type). Personally, I would reorder properties here so I can give the Submenu property a sort value of 10 to keep it at the bottom.

2. The Menu Item Link needs to have a property added to it that allows you to add a link, be it a link picker for internal links or something else. That decision is up to you.

So, at this point you should have 3 new document types that have a structure that appears similar to this:

Menu Item Base - Content tab - Submenu Property Menu Item Label - Content tab - Label Property, Submenu Property Menu Item Link - content tab - Label Property, Link Property, Submenu Property

Step 4) (I'm going to speed up a bit here now) Add a property to your Home Page of type Menu Builder. You might want to add a new tab for it but that is up to you.

At this point, you can now build your menu in the back office.

All that is left now is rendering out you menu, I say all, it will take a bit of time but effectively a property that is of type Nested Content will store it's information as an IEnumerable<IPublishedContent> so, assuming you've called your Menu property 'Menu' you can access it like this:

var menuEntries = Model.Content.Site().GetPropertyValue<IEnumerable,<IPublishedContent>>("menu");

You can then look around them as follows:

foreach(var menuItem in menuEntries)
{
    //do something here, check if this is a label or a link as you might want to render it out differently.

    //Now handle the submenu
    var subMenu = menuItem.GetPropertyValue<IEnumerable<IPublishedContent>>();
   if(subMenu != null && subMenu.Any()) //Checking we have entries
   {
         //In here you would handle the sub menu items.
         //Realistically, you would probably have some sort of
         // reccursive function call to handle this so depth of nested menus doesn't matter.
   }
}

I hope that this helps you :-)

Nik

Hi Matt,

Did you install it via NuGet or the Package Manager in the back office? I do find that the back office doesn't always show up new editors, so you might be getting an annoying caching issue. If you haven't, it could be worth restarting the website and seeing if it turns up then.

Thanks,

Nik

Hey Matt,

No problem, what version of .Net is your project set up for? I've had an issue where I was set up as .Net 4.5, but needed to be 4.6 to get MegaNav to work. If you are currently 4.5, update your project to 4.6.1 and re-install MegaNav

update-package Cogworks.MegaNav -reinstall -ignoreDependencies

I like the ignoreDependecies tag in that command as it means it won't try and re-install loads of things that aren't needed.

Nik

Hi Matt,

Okay, so if you are only having 1 navigation on your site, then you only need to add it to your root node. If you were displaying some sort of secondary menu on certain pages you might look at adding another one somewhere else for that.

When you add nodes to the mega nav, you can move them in 4 directions.

Up Down, left, and Right.

Up and down sorts their position, left and right sorts their level.

so, I would create 4 nodes initially, Home, About, Blog, and Contact. Then, I would add About us, drag this up to beneath About and right one notch. It can be a little fiddly so just persevere with it. Repeat this for the What we do node.

With regards to rendering it out, it looks like you are using Models Builder, which is great.

So I'm going to assume that you've called your menu property "Menu".

So to render the menu using the example partial use the following line of code:

@Html.Partial("ExampleNavigation", Model.Content.Menu)

This should work because MegaNav comes with the correct property converter so Models Builder knows that the property is of type IEnumerable<MeganavItem>

Let me know how you get on.

Nik

Hi Matt,

That's no problem, happy to help. So, when you've added a property to your home Document Type, (of type MegaNav) you've given it a name. When I've said "Menu" I've assumed that is what you've called the property. If you've called the property MegaNav, then replace Menu with MegaNav, etc.

That make sense?

Thanks,

Nik

Hi Matt,

So, generally the contents of a navigation are structured like this:

<ul>
    <li><a>My first entry</a></li>
    <li><a>My second entry</a></li>
<ul>

The reason for this is so that when you need to do a drop down you can look to do something like this:

<ul>
    <li><a>My first entry</a></li>
    <li>
        <a>My second entry</a>
        <ul class="subMenu">
            <li><a>My sub menu item</a></li>
            <li><a>My second sub menu item</a></li>
        </ul>
    </li>
<ul>

This allows you to have you association between each level of the menu. From this perspective, there are hundreds of tutorials about this sort of structure online, along with css snippets etc so rather than me try and provide something for you, it would be worth having a look around when it comes to that.

You'll want to update your razor logic (particularly focussing on your helper) and think about how that renders out, for example, one option might be to adjust it so it's like this:

@helper RenderNavigation(IEnumerable<MeganavItem> items)
{
    if (items.Any())
    {
        <ul>
            @foreach (var item in items)
            {
                <li>
                    <a href="@item.Url" class="nav-link w-nav-link">@item.Title</a>
                    @RenderNavigation(item.Children)
                </li>
            }
        </ul>
    }
}

Thanks,

Nik

Hi Matt,

I've never seen that sort of navigation structure and it's not one I would choose to use, I'm sure you could find a way but you'd probably need some javascript to help it.

Maybe someone else could help with that but it's more a front end problem now rather than an Umbraco specific issue :-)

Nik

Can you share tutorial link here??