Site Navigation
The site's navigation, the teal menu in the head banner that appear on every guide, is configured in the Header of the Group (not the global System Header) to accomodate unique navigation for each department/center. Each item in the main navigation may have a dropdown, or sub-navigation.
- Placement: below head banner
- Format: horizontal menu that expands downward on hover
- Color: #006685 (hover: #33859D)
- Font: 1em/12px, white #FFF, 600 weight
- Links: All menu items must have a hyperlink, including the main navigation and sub-navigation items
When designing your site's navigation, think about how your guides will be structured. There are two approaches to this:
- Each main navigation item is a guide. All sub-navigation items are pages within that guide. Typically, the main navigation item is the first page in the guide, unless there is no content on this page. This will preserve the breadcrumb structure, meaning the breadcrumbs will reflect your site navigation. This approach is best suited for guides that don't have a lot of content.
- Each main navigation item is a guide and each sub-navigation item is a separate guide. The main navigation guide contains an introduction and a page for each sub-navigation item. These sub-navigation pages redirect to separate guides. This will not preserve the breadcrumb structure. This approach is best suited for site navigation items that have a lot of content which can't be easily contained and maintained within a single guide.
Example:
Guide Navigation
Guide Navigation refers to navigation within a single guide/webpage and allows users to jump to content on the page or a specific page within a guide.
- Placement: below the <head> tags (banner, site navigation, guide info) to the left of the main content.
- Format: all guides must use the "side-nav" layout on public pages and guides.
- Template: "Walden Guide Side-Nav Template" is the standard University guide template that everyone should use.
- Navigation Items: Each page is automatically included. Standard is to include both boxes (when page is active) and sub-pages in side navigation. Exceptions to this are allowed when navigation needs to be condensed due to the number of pages and boxes.
- Color:
- Active: #4E3C16
- Inactive: #685630
- Font:
- Page: 1.333em/15px, white #FFF
- Box: 1.333em/15px, #574319
Breadcrumb Navigation
Breadcrumbs are visible links that help orient the user where they are on the site. They allow the user to navigate back to an upper-level page on the site without using the browser's back button.
- Breadcrumb must include the following levels: Center or link to page with all Centers > Group Name > Guide Name > Page Name
- Placement: below site navigation and above guide name
- Format: list of horizontal hyperlinks
- Font: Trebuchet, #005295, underlined, 11px, bold
Example:
This screenshot needs to be updated now that the Group is appearing.
