Version 1.9.5 Beta

AutoNav.NET is, by far, the easiest navigation generator to set up and use for any .NET site.

Usage

Overview

AutoNav.NET is an ASP.NET control that is designed to easily generate navigation elements (main navigation, breadcrumbs, sub-navigation) programmatically with minimal setup.  In addition, it has matching algorithms to take a "best guess" at matching orphan documents with elements in your Sitemap.  Hence: "AutoNav".  This component is designed to work with Sitefinity CMS or as a standalone .NET control.

Installation

Site Setup

There are three (without Sitefinity) or four (with Sitefinity) code files required by AutoNav.NET, one configuration file and the web.config should also be modified. File paths have been included below.

AutoNav.NET requires ASP.NET 2.0 or higher.

Included Files

GSSI-Navigation.cs

Contains a SiteMapProvider for the custom Web.sitemap file, and a custom configuration class for the main navigation in Web.config. Copy to /App_Code folder.

Navigation.ascx

This control does most of the heavy lifting. For a normal .NET site, you can place in the /Controls folder. In Sitefinity, you would upload this as a user control.

Web.config

In root folder.

Web.sitemap

XML file containing the sitemap. Not needed for Sitefinity, or any system which has a Sitemap provider.

Configuration

In a normal .NET site, you may add a reference to the navigation script under the page declaration in two ways. The first is included in the sample Web.config file.

<pages>
	<controls>
		<add tagPrefix="GSSI" namespace="GSSI.Web" />
		<add tagPrefix="GSSI" src="~/Controls/Navigation.ascx" tagName="Navigation"/>
	</controls>
</pages>


Otherwise, you may declare the Navigation on individual pages (not preferred).

<%@ Register Src="~/Controls/Navigation.ascx" TagPrefix="GSSI" TagName="Navigation" %>

Placing the control in the page

The control reference for Navigation.ascx should be within the ASP.NET server form tag (a <form> element with the property runat="server").

<form id="form1" runat="server">
     <GSSI:Navigation runat="server"
           RenderingMode="SubNavigation"
           TopLevelHTMLTemplate='<span>{1}</span>' 
     />

Navigation.ascx Properties

Misc.

Name Default Description
RenderingMode SubNavigation

How to render the controls. Valid settings are

  • SubNavigation (renders "active" tree underneath the top-level node) -- (Previously called "TreeView", renamed for clarity.)
  • BreadCrumbs (breadcrumb trail based on location)
  • Sitemap (renders entire navigation)
  • MainNavigation (renders or manipulates top navigation links)
  • SelectBox (renders a select box to "jump" to a navigation link upon selection).  Ugly but sometimes desired.
SiteMapProviderName   Allows you to use different Sitemap Providers on the same page.
ShowTopLevelNavigation false In SubNavigation rendering mode, the top level navigation links will not show if they are not active. (Only the top active link displays, such as the "Products" link. Setting this to true will include all the top level links, plus the expanded "active" tree.
MaximumTreeDepth 0 How deep to render navigation.  Zero means no maximum.
StartingNode &nbsp; Allows you to render the tree below a particular numbered node, anywhere in the node tree. For example, "01" renders the children of first node, "0102" renders the children of the second node under the first node.  Can have unexpected results since the Sitemap can change.
UseFullPath false If true, will generate the full path for hyperlink URLs.
UseSitefinityLocalization false Allows you to use path-prefix based Sitefinity language localization, and still support mixed-language node matching.  This means that a main navigation item of "/about-us/default.aspx" will match a Sitefinity node of "/en/about-us/default.aspx".
DebugMode true Will output a hidden copy of the Sitemap after the initial rendering, to get a picture of what's actually contained in the hierarchy.  Suggestions on what else could happen under this mode are welcome.



Appearance

Name Default Description
ActiveCssClass active CSS class that is applied to an active node.
InactiveCssClass inactive CSS class that is applied to an inactive node.
MoreCssClass more CSS class to apply for when a sub-tree exists for that node.
NavigationCssClass nav The CSS class applied to the top of each tree (the &lt;ul&gt; element).
RenderTopLevelAsLinks true Normally, the whole tree is always a link tree. In TreeView and Sitemap, setting to false means the very top active node can be some arbitrary markup, based on the TopLevelHTMLTemplate.
TopLevelHTMLTemplate String.Empty Under SubNavigation and Sitemap modes, allows the top-level links to be rendered as something other than links, using "{1}" as the title placeholder.  For instance, to output the top link as a '<span class="subnav-title">About Us</span>', you would enter '<span class=\"subnav-title\">{1}</span>'.  To hide the top-level links, enter empty braces: "{}".
LinkHTMLTemplate <span>{1}</span> Override to change the InnerHTML of links.  {1} is replaced by the title.
PagedNavigation false Set to true to create navigation trees that show one level of navigation at a time (used for mobile).
HomeLinkTitle "" Overrides the node.Title for the root Node ("Home"). Primarily for Sitefinity, which calls "Home" simply "[Sitemap]".

 

Columns and Grouping

Name Default Description
GroupSize 0 Creates multiple un-ordered lists grouped by classes: "group-1", "group-2", etc, putting no more in each list than the size of the group.  Useful for Mega-Dropdowns.  A GroupSize of zero means no grouping.

 

Behavior

Name Default Description
AutoActivate true If a page doesn’t exist in Web.sitemap or whatever sitemap provider, turning to true (on by default) makes the Nav control take it’s best guess on where it should go. It will auto-highlight based on a document being in the same folder as a page in the sitemap, or a sub-folder of a folder in the sitemap, or in Sitefinity’s case, a subfolder of a page in the sitemap, with that page being treated as a folder in Sitefinity.
AutoActivateTitleID &nbsp; Server control containing the page title to be displayed in breadcrumbs. Most useful for orphan pages.
ShowAllChildrenUnderNode 0 Render all children nodes under a certain level in a TreeView, regardless of active state.
OpenExternalLinksInNewWindow true If your sitemap link starts with http, it will add "_blank" to the link if true.

 

Breadcrumbs

Name Default Description
BreadcrumbSeparator > Character that separates breadcrumbs.
ShowBreadcrumbHomeLink true Show the root link or not in the breadcrumbs (when that’s the rendermode).

 

Main Navigation

Name Default Description
LoadNavWithJQuery true Used to improve SEO. Will include html markup for the top level links, but when set to true, will load the rest of the tree with jQuery. Obviously, a jQuery script reference is required for this.
MainNavCollectionID String.Empty New feature since 1.9.1.  Will allow main navigation to be defined on a page (or master page / control) basis.  This means that "MainNavigation" is not site-wide, but just another type of rendering mode.
UpdateLinkControl true Re-write the link title and href based on Sitemap node settings.

Examples

Since 1.9.1, you can pass an un-ordered list of server controls (runat="server") to the AutoNav control, and it will add child <ul>s to the started tree.  In addition, it will update the href to match the Sitemap node (such as a language path), and will add an active state to the top link, if it applies.  Here's a Sitefinity example


 

<ul runat="server" id="mainnavcollection">
   <li runat="server">
      <a  runat="server" class="L1 nav-about" href="~/AboutUs/default.aspx"><span>About Us</span></a></li>
   <li runat="server">
      <a  runat="server" class="L1 nav-research" href="~/Research/default.aspx"><span>Research</span></a></li>
   <li runat="server">
      <a  runat="server" class="L1 nav-work" href="~/OurWork/default.aspx"><span>Our Work</span></a></li>
   <li runat="server">
      <a  runat="server" class="L1 nav-news" href="~/NewsEvents/default.aspx"><span>News &amp; Events</span></a></li>
   <li runat="server">
      <a  runat="server" class="L1 nav-media" href="~/MediaRoom/default.aspx"><span>Media Room</span></a></li>
   <li runat="server">
      <a  runat="server" class="L1 nav-supporters" href="~/SupportersPartners/default.aspx"><span>Supporters/Partners</span></a></li>
</ul>


<GSSI:Navigation runat="server"
           RenderingMode="MainNavigation"
           MainNavCollectionID="mainnavcollection"
           UseSitefinityLocalization="true"
     />

 

This can produce output like this:

 

<ul id="ctl00_mainnavcollection">
  <li id="ctl00_Li1">
    <a class="L1 nav-about" href="/fr/aboutus/default.aspx"><span>QUI SOMMER-NOUS?</span></a>
    <ul class="nav L2">
      <li class="first-child L2 inactive">
        <a class="L2" href="/fr/aboutus/default.aspx"><span>Cette section</span></a></li>
      <li class="last-child L2 inactive">
        <a class="L2" href="/fr/aboutus/programsprojects.aspx"><span>Programs Projects</span></a></li>
    </ul></li>
  <li id="ctl00_Li2">
    <a class="L1 nav-research" href="/fr/research/default.aspx"><span>RECHERCHE</span></a>
    <ul class="nav L2">
      <li class="last-child first-child L2 inactive">
        <a class="L2" href="/fr/research/default.aspx"><span>Cette section</span></a></li>
    </ul></li>
  <li id="ctl00_Li3">
      <a class="L1 nav-work" href="/fr/ourwork/default.aspx"><span>NOTRE TRAVAIL</span></a>
      <ul class="nav L2">
        <li class="last-child first-child L2 inactive">
          <a class="L2" href="/fr/ourwork/default.aspx"><span>Cette section</span></a></li>
      </ul></li>
  <li id="ctl00_Li4">
    <a class="L1 nav-news active" href="/fr/newsevents/default.aspx"><span>NOUVELLES ET EVENEMENTS</span></a>
    <ul class="nav L2 active">
      <li class="last-child first-child L2 active">
        <a class="L2 active" href="/fr/newsevents/default.aspx"><span>Cette section</span></a></li>
    </ul></li>
  <li id="ctl00_Li5">
    <a class="L1 nav-media" href="/fr/mediaroom/default.aspx"><span>SALLE DE PRESSE</span></a>
    <ul class="nav L2">
      <li class="first-child L2 inactive">
        <a class="L2" href="/fr/mediaroom/default.aspx"><span>Cette section</span></a></li>
      <li class="L2 inactive">
        <a class="L2" href="/fr/mediaroom/missionvission.aspx"><span>Mission &amp; Vission</span></a></li>
    </ul></li>
  <li id="ctl00_Li6">
    <a class="L1 nav-supporters" href="/fr/supporterspartners/default.aspx"><span>SUPPORTEURS/PARTENAIRES</span></a>
    <ul class="nav L2">
      <li class="last-child first-child L2 inactive">
        <a class="L2" href="/fr/supporterspartners/default.aspx"><span>Cette section</span></a></li>
    </ul></li>
</ul>

 

 

web.config

Installation

Create in root of project if it does not exist.

Example

 

<?xml version="1.0"?>
<configuration>
	<!-- Start LEGACY Main Navigation configuration.   
	DO NOT INCLUDE if you are including Main Navigation links in your Master page 
	<configSections>
		<section name="mainNav" type="GSSI.Web.MainNavConfiguration"/>
	</configSections>
	<mainNav>
		<menus>
			<add url="~/products/default.aspx" menuID="nav-products" />
			<add url="~/industries/default.aspx" menuID="nav-industries" />
			<add url="~/solutions/default.aspx" menuID="nav-solutions" />
			<add url="~/online-demo/default.aspx" menuID="nav-onlinedemo" />
			<add url="~/about-us/default.aspx" menuID="nav-aboutus" />
			<add url="~/news/default.aspx" menuID="nav-news" />
			<add url="~/contact/default.aspx" menuID="nav-contact" />
		</menus>
	</mainNav>
        END LEGACY Main Navigation configuration. -->
	<pages autoEventWireup="true" enableSessionState="true" enableViewState="true"
		enableViewStateMac="true" smartNavigation="true">
		<controls>
			<add tagPrefix="GSSI" namespace="GSSI.Web" />
			<add tagPrefix="GSSI" src="~/Controls/Navigation.ascx" tagName="Navigation"/>
		</controls>
	</pages>
        <!-- This is for XML-based navigation. Not required for Sitefinity sites -->
	<siteMap defaultProvider="SiteMapProvider">
		<providers>
			<add name="SiteMapProvider" type="GSSI.Web.SiteMapProvider" siteMapFile="Web.sitemap" />
		</providers>
	</siteMap>
</configuration>

 

 

Web.sitemap

Installation

Create in root of project if it does not exist. Not required for Sitefinity sites.

Example

 

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
	<siteMapNode url="~/default.aspx" title="Home">
		<siteMapNode url="~/rv-rentals/default.aspx" title="RV Rentals" description="">
			<siteMapNode url="~/rv-rentals/default.aspx" title="Overview" description="" />
			<siteMapNode url="~/rv-rentals/the-grand-experience.aspx" title="The Grand Experience (MHA)" description="" />
			<siteMapNode url="~/rv-rentals/style-to-share.aspx" title="Style to Share (MHB)" description="" />
			<siteMapNode url="~/rv-rentals/big-motorhome-style.aspx" title="Big Motorhome Style (SVC)" description="" />
		</siteMapNode>
		<siteMapNode url="~/locations.aspx" title="Locations">
			<siteMapNode url="~/locations/locations-sanfrancisco.aspx" title="San Francisco" />
			<siteMapNode url="~/locations/locations-lasvegas.aspx" title="Las Vegas" />
			<siteMapNode url="~/locations/locations-losangeles.aspx" title="Los Angeles" />
		</siteMapNode>
		<siteMapNode url="~/rv-tours/arizona-grand-canyon-state.aspx" title="RV Tours">
			<siteMapNode url="~/rv-tours/arizona-grand-canyon-state.aspx" title="Arizona / Grand Canyon State" />
			<siteMapNode url="~/rv-tours/civil-war.aspx" title="Civil War" />
			<siteMapNode url="~/rv-tours/peaks-and-parks.aspx" title="Peaks &amp; Parks" />
		</siteMapNode>
		<siteMapNode url="~/become-a-dealer/default.aspx" title="Become a Dealer" cssClass="">
			<siteMapNode url="~/become-a-dealer/default.aspx" title="Overview" />
			<siteMapNode url="~/become-a-dealer/dealer-application.aspx" title="Dealer Application" />
		</siteMapNode>
	</siteMapNode>
</siteMap>

 

Properties

Name Default Description
url &nbsp; URL of the page in the site.
title &nbsp; The text that goes into the link.

Last edited Feb 9, 2011 at 6:29 PM by matthewdl, version 10

Comments

No comments yet.