NavIt Mvc

 NavItMvc is a template Mvc partial view that is designed to be used for generating different types of navigation. I created this package to help those developing their own Mvc navigations as a starting guide as I found a lot users asking the same questions on the forum.

NavItMvc installs a single partial view into your Umbraco, once installed you can call the partial view from your Views and set a few options using Viewdata.

The **required** configuration options are:

- maxLevel - the number of levels of node you want to render
- allExpanded - if true all nodes in the tree will render (useful for JS drop down style navigations or sitemaps)
- skipHome - if you want your homepage to be included in the navigation or not

The **optional** configuration options:

- startLevel - the content node level that the navigation should start at (useful for sidebar navs)
- mainUlCssClass -if you need a class adding to the nav main UL
- wrapUlMarkupBefore - html that should be placed before the ul if there are any items
- wrapUlMarkupAfter - html that should be placed after the end of the ul if there are any items
- navItGroupId - if you need to group your navigation, just add a property that stores an id as the selected value and use this property
- skipUls - if you want NavIt to output a flat list of lis and no uls set this to true

Example - for a main nav bar using Bootstrap

    @{Html.RenderPartial(
            "NavIt",
            Model.Content,
            new ViewDataDictionary(this.ViewData) { 
                { "maxLevel", 2 }, 
                { "allExpanded", false },
                { "skipHome", false },
                { "mainUlCssClass", "nav" }                          
            }
    );}

Example - for a sidebar using Bootstrap

    @{Html.RenderPartial(
            "NavIt",
            Model.Content,
            new ViewDataDictionary(this.ViewData) { 
                { "maxLevel", 3}, 
                { "allExpanded", false },
                { "skipHome", true },
                { "startLevel", 2},
                {"mainUlCssClass", "nav nav-list"},   
                {"wrapUlMarkupBefore","<div class=\"span3\"> <nav class=\"well sidebar-nav\">"},
                {"wrapUlMarkupAfter","</nav></div><!--/span-->"},
            }
    );}   

Example - for a footer nav, using NavGroupId 5

    <ul id="footer">
    @{Html.RenderPartial(
            "NavIt",
            Model.Content,
            new ViewDataDictionary(this.ViewData) { 
                { "maxLevel", 2 }, 
                { "allExpanded", false },
                { "skipHome", true },
                { "mainUlCssClass", "nav" },
                { "navItGroupId", 5},
                { "skipUls", true}                        
            }
        );}
    </ul>

Example - for a sitemap

    @{Html.RenderPartial(
        "NavIt",
        Model.Content,
        new ViewDataDictionary(this.ViewData) { 
            { "maxLevel", 10 }, 
            { "allExpanded", true },
            { "skipHome", false }                       
        }
    );}

Additionally within the NavIt.cshtml (partials folder) there are two property aliases which can be changed, they are:

- navigationNameOverride if found on a content node, the value is used instead of the node name in the navigation
- isDataNode any content node with this property will be excluded from the navigation (regardless of umbracoNaviHide)

**Notes:**

- NavIt will exclude any nodes that are currently hidden by the umbracoNaviHide property alias.
- NavIt will add a class="active" to all items in the list that are either currently selected or an ancestor of the currently selected item. The currently selected item will be rendered as a span tag instead of anchor tag.

Below is an example of the HTML that NavIt renders, the active content node is "Client Testimonial 1":

    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about-us.aspx">About Us</a>
            <ul>
                <li><a href="/about-us/our-team.aspx">Our Team</a></li>
                <li><a href="/about-us/our-offices.aspx">Our Offices</a></li>
            </ul>
        </li>
        <li>
            <a href="/testimonials.aspx" class="active">Testimonials</a>
            <ul>
                <li><span class="active">Client Testimonial 1</span></li>
                <li><a href="/testimonials/client-testimonial-2.aspx">Client Testimonial 2</a></li>
            </ul>
        </li>
        <li><a href="/contact-us.aspx">Contact Us</a></li>
    </ul> 

If you download the source project from BitBucket (https://bitbucket.org/jeavon/navitmvc) it contains a full Umbraco install with a few sample nodes to demo and test this partial view. The username is admin and the password is 1234.

Any ideas on how to optimise, improve or add features please me know or send a pull request.