Navigation and Linking Standards

The top navigation of any site should contain the primary sections of the site, these are the major areas of interest throughout the site.  Typically these align the the service categories, audiences, or organization of the agency/board or commission the site represents.

The top menu allows a dropdown option for secondary level links, these links are the immediate children to the top level.  We DO NOT allow 3rd or further level links to be exposed in the primary navigation.  Additional navigation menus are exposed as the user navgiates further and further into the site via the left navigation (see below).

The menu should be easily understood and simple verbiage to represent their contents.  It's a good rule to never let a menu item "Title" exceed two words, keeping menu items brief yet easily understood.  A menu should be limited to a single line, your menu number of primary menu items should never "wrap" to a second line.  Another recommendation is surrounding adding a "Home" entry.  Many agencies request a "Home" tab, but the more modern approach it to leverage the "site logo" to send people back to the main "homepage" which is performed by default using our template.  This increases the space for your other primary menu items.

Another item people tend to include, but may not be required, in the menu is "About Us" and "Contact Us".  While this may have been traditional in times past, the next expectation is that those items live in the footer and again can give you a greater more direct access to those pages along with giving you more room for focal items in the primary top navigation.

The left navigation is used to enable user navigation deeper into the site.  Many websites have a deep hierarchy and by using this design we can support an unlimited depth of site while still showing only the most pertinent navigation path to the user.

The default setup for the left hand menu is as follows:

• If the "current" page is a "Parent" the left nav will show the "Current" page AND it's children
• If the "current" page has NO children the left nav will show IT'S Parent and it's Sibling pages.

Traversal back up the navigation path will normally be accomplished either via the "back" button or via the breadcrumb.  This is the most common experience for the user and since it's common expectation on all our sites, and the web in general, will be an expected behavior.

The placement of links on the site and the "launch" behavior of those links is determined by the agency and while it can deviate from the recommendation below, DoIT recommends following the rules below for a regular experience through all Illinois.gov properties.

Regardless of your adoption of these particular rule, the most important part is to have consistency WITHIN your site.  Pick a set of rules and follow it throughout your entire site.

Recommended Rules:

• For links leading to another page on the site - Launch hyperlinks in the SAME window.  For this setting there is no need to change the "target" of the hyperlink
• For links leading to a PDF or other asset on the site - Launch hyperlinks in a NEW window. For this setting you need to change the "target" to "New Tab"
• For links leading to a EXTERNAL site - Launch hyperlinks in a NEW window. For this setting you need to change the "target" to "New Tab"

Things to keep in mind:

• Links with the same text MUST go to the same location - This is an accessibility rule. We generically call this the "click here" rule, you can't have a page full of links all called "click here" which go to different places.   So for example if you have a list of press releases then link the press release TITLE will enforce uniqueness in the links.
• Each link must DESCRIBE the destination - The link text must describe the destination of that link, this is another reason why text like "Click here" is a no-no.  There is no description of what that leads to.