5 votes

This package is marked as retired

This package has been flagged as retired by the package owner. Continue to use at your own risk

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.

Screenshots

No current release

Package owner

Jeavon Leopold

Jeavon Leopold

Jeavon has 13628 karma points

Package Compatibility

This package is compatible with the following versions as reported by community members who have downloaded this package:
Untested or doesn't work on Umbraco Cloud
Version 8.18.x (untested)

You must login before you can report on package compatibility.

Previously reported to work on versions: 7.2.x, 7.0.x

Package Information

  • Package owner: Jeavon Leopold
  • Created: 24/06/2013
  • Current version 1.1.0
  • .NET version 4.0
  • License MIT
  • Downloads on Our: 1.5K

External resources