U.S. Department of Energy - Energy Efficiency and Renewable Energy
Communication Standards and Guidelines
Left Navigation
The left navigation is a vertical bar of menu choices that appears on the left side of the page to help users navigate within a section of a program site (sections are accessed from the top navigation). For example, the "About the Program" section may have pages for mission, staff, contacts, and budget. Left navigation would provide access to those pages.
Left navigation is also used to navigate within a program subsite, such as the Building Technology Program Building America content.
Office sites use left navigation as their site-wide navigation.
How the Left Navigation Works
The left navigation expands or collapses to show or hide menu options depending on where you are within each section or subsite:
-
After a user selects a section from the top navigation, a column of menu choices for that section appears on the left side of the page (see the graphical example to the right). After making a selection from the left navigation, the user will go directly to the desired page. If additional pages are available beneath the user's original choice, the left navigation will "slide open" to reveal additional menu options, which are slightly indented below the original choice. If the user then selects one of the additional menu options, a third level of subordinate options may appear. Only three levels of left menu choices for each section will be approved; additional levels of navigation must be linked from the content area in the in the middle of the page. For an example of how the expand/collapse feature works, see the left navigation used for this site.
-
In some cases, the left navigation within a section will act as a "menu page" that simply links down to subsites that reside within the section. If the menu choice links to a subsite, the left navigation will change to reflect the content of the subsite. In the example to the right, the section name "Technologies" has been replaced by "Photovoltaics," and the left navigation now pertains to the Photovoltaics subsite.
Rules for Developing Left Navigation
-
Please look through the Library of Approved Navigation Labels to find terms that could be used for your left navigation labels. If your content is not adequately described by one of the terms in the Library, propose a new label for approval during your first review.
-
If necessary, program sections that include a great deal of content may choose to use the left navigation on the section's home page as a "menu page" that simply links down to a series of subsites that reside within that section. However, subsites may not link down to an additional level of subsites (only one level of subsites will be approved).
-
If a program section includes links to subsites, the subsite's title and navigation should take the place of the section's title and navigation when the user selects the subsite from the section's main navigation (the name of the section will still be highlighted in the top navigation to indicate where the subsite resides).
-
All pages below the home page of an office site or a program subsite must include a link back to the office or subsite home page as the first link at the top of the left navigation bar. (Pages below the home page of each section do not need to include a link back to the section's home page, because the user can always return to the section's home page by re-selecting the section from the top navigation bar.)
-
Only three levels of "expand/collapse" menu choices for each section or subsite will be approved; additional levels of navigation must be linked from the content area in the middle of the appropriate page.
Supplemental Left Navigation
In addition to the standard left navigation, you have the option to use one of the following two supplemental navigation items.
Blue Button
A blue button provides a special visual treatment for one navigation element.
- Use when needing to draw attention to strategic content.
- Displays on every page in that section.
- Are calls to action (e.g., Search the Publications Database, Subscribe to our Newsletter, How Do I Apply for Weatherization?).
Quick Links
Quick links are designed to provide additional navigation that is not included on that particular page.
- Quick links can be used on home pages, all pages, or select pages.
- Quick links must go to pages on your site (no links off the site including other EERE sites)
|