Navigation is the glue that holds together websites. A successful website will feature solid navigation elements that help users find the information they're looking for. These are recommendations from Web Services on how to design your navigation elements.
Left-Side Main Navigation Bar
- The University standard is that the main site navigation will be located along the left side of all pages. ** An exception to the above rule is if Web Services creates a custom design for your department that does not utilize a left-side navigation.
- Websites in the new campus 2010 web templates can utilize the top (horizontal) navigation in addition to the left navigation if desired.
- All pages will use a standardized navigation bar whose main top-level elements do not change throughout the entire site.
- This navigation menu may have submenus that change from page to page.** Websites in the new campus 2010 web templates have "flyout" navigation functionality built in and do not have the ability to expand or contract.
Breadcrumbs track a path through a website, allowing users to backtrack at any point, and providing them with a reference point for their location within the site. Ideally, the path that is tracked is the path of links that the user followed to get to their present location.
- Breadcrumbs are a required feature
- The recommended location for bread crumbs is along the right edge of the page below the page banner
- The breadcrumb path should be as follows: "CSU, Chico | Department Name | Subdirectory | Page"
- Where "CSU, Chico" is a link to the CSU, Chico home page
- "Department Name" is a link to your department's home page
- "Subdirectory" is a link to the parent directory of the current page
- "Page" is the title of the current page (bold text, no link)
- Websites in the WCMS already follow this standard with no extra effort required by the user.
For long web pages (more than 3 or 4 screens tall), in-page navigation should be provided, to help both disabled and non-disabled users navigate around the page and to know what content is on the page. This is best implemented as a bulleted list at the top of the content area of a web page.
Headings and Page Menu
Long pages should have a hierarchical "table of contents" at the top of the page, linking to anchors placed with the topic headings in the content below. The table of contents should be in the form of a bulleted list and should appear directly under the title at the top of the page.
- Left-Side Main Navigation Bar
- Bread Crumbs
- In-Page Navigation
- Headings and Page Menu
- Back to Top Links
- Home Links
- Links to Files
This menu should link to subheadings on the page that are clearly organized and defined. Subheadings should use standard HTML
Back to Top Links
On long pages with multiple headings, links to the top of the page should be placed periodically on the page. The standard link text will be "Back to top" and link to the "content" anchor (
<a href="#content">). The empty anchor automatically jumps to the top of the content area of the page.
Typically, these links will be placed at the end of each main topic section (typically, these are the <h2> level tags). However, some judgment should be used. There is no reason to place "Back to Top" links after every section if the sections are very short. On long pages, there should always be a Back to Top link placed at the bottom of the page.
Use the following guidelines in placing "Back to top" links:
- Links will only appear at the end of main topic sections (
- Subsections (h3, h4, etc.) will not have "Back to top" links
- Links will be placed at the end of the sections
- Links should be spaced out to appear no more often that about every screen and a half (given a 1024x768 monitor)
- Short sections do not require "Back to top" links
- Short pages do not require "Back to top" links
- Long pages (over three screens tall) should have a "Back to top" link at the end at the very minimum.
- Any link to "Home" must be a link to the University home page.
- Links to your department or unit home page should say something like "Math Home", "Human Resources Home", etc.
- This is driven both by usability concerns and by accessibility requirements.
- Sites within the WCMS automatically follow this standard with no extra effort required by the user.
Links to Other Web Pages
When linking to other web pages, do not display the URL to the end user. Use readable text instead. This promotes general readability in addition to meeting accessibility standards.
- Good... "Visit the Presidents website for more information" OR "Visit the Presidents website for more information", where the underlined text links to the actual URL of the President's website.
- Bad... "To get more information, go to http://www.csuchico.edu/prs."
Links to Files
Websites often have links to files that are not web pages, including PDF files, Word documents, Excel and PowerPoint files, etc. Accessibility standards require that links to non- HTML content must identified. The standard notation for these links are as follows:
- A link to any external file type must indicate the type of file in parentheses after the link:** Example: download the form (pdf)
- File types will be identified as follows:** Adobe Acrobat: (pdf)
- Microsoft Word: (doc) or (docx)
- Microsoft Excel: (xls) or (xslx)
- Microsoft PowerPoint: (ppt) or (pptx)
- MP3: (mp3)
- QuickTime movie: (quicktime)
- Windows Media file: (wma) (wmv)
- All files 1.0 megabytes or larger will have their file size (in MB) appended to the link (to warn and accommodate users with low bandwidth connections):
- Example: download the presentation (ppt, 3.2 MB)
- One decimal place is required in all cases: 4.7 MB, 3.0 MB