NIH EA Website Logo

NIH Enterprise Architecture Website

Front End Design Style Guide

Navigation System

There are eight navigation elements used in the NIH EA website. Each element serves different purposes and collectively provides comprehensive navigation system. By applying these navigation elements consistently throughout the site, behavior of the pages within the site becomes more predictable to users. Consequently, they will be able to learn and understand the structure of the site and individual pages more quickly.

In the following, each navigation element is explained with examples of wireframe pages. For the first five elements, pages to be linked in the navigation element in relation to the current page are indicated in a sample tree structure diagram.

1. Main Navigation

This navigation element provides links to top level pages of key sections of the website. The main navigation will be placed on every page except for pop-up pages. In the sample tree diagram, the second level pages are 1.0, 2.0 and 3.0.

Diagram: Main Navigation
Sample wireframe page:
Wireframe: Main Navigation

2. Breadcrumb

Breadcrumb links provide ways to navigate up the site structure. They are not necessarily the navigation path a user has taken to the current page. Rather, they represent a structural path to the page as predetermined by the main navigation. On any page except for the 'Home' page, breadcrumb links should include the path from the 'Home' page to the direct parent of the current page. In the sample tree diagram, the current page is at 1.2 and its direct parent is 1.0. Therefore, the breadcrumb should include links to Home and 1.0.

Diagram: Breadcrumb
Sample wireframe page:
Wireframe: Breadcrumb

3. Landing Index

This navigation element provides links to navigate down the site structure from the second level page to their immediate child pages. This is only applicable to the second level pages (1.0, 2.0 and 3.0 in the sample tree structure), and serves as the entry point for each key section of the website.

Diagram: Landing Index
Sample wireframe page:
Wireframe: Landing Index

4. Section Links

This navigation element provides link to navigate down the site structure from the tertiary level or lower pages to their immediate child pages. This is only applicable to pages at third level or below with child pages directly below them. In the sample tree diagram, page 1.2 will include links to 1.2.1 and 1.2.2. The only other page in this sample diagram that can have this navigation element is 3.1 with 3.1.1 as its child page.

Diagram: Section Links
Sample wireframe page:
Wireframe: Section Links

5. Related Links

This navigation element provides links to related pages in different sections, or in the same section, but not linked by other navigational elements. It may also include links to pages on external websites. In the sample tree diagram, page 1.2 may include links to 1.1, 2.1 and 3.1.1 given that these pages provide content related to page 1.2.

Diagram: Related Links
Sample wireframe page:
Wireframe: Related Links

6. Action Links

This navigation element provides links to pages that enable a user to take action related to the content of the current page. The selection of action links is dependent on the page content. Actions directly related to the page content should be selected to guide users to appropriate next steps.

Sample wireframe page:
Wireframe: Action Links

7. Category Links

This navigation element provides links to lists of related architecture definitions within the Architecture Library section of the site. It may be used only in the enterprise architecture content (EAC) template. Each category value such as "Brick" and "Collaboration" in the sample wireframe represents the category to which a particular enterprise architecture definition belongs. Each value is linked to a list of all architecture definitions that have the same category value assigned to them. For example, clicking on “Collaboration” will display a page with a list of all architecture definitions (bricks, patterns, data models, etc.) that are related to collaboration.

Sample wireframe page:
Wireframe: Category Links

8. Global Utility Links

This navigation element provides links to utility pages, on every page except for pop-up pages, to provide consistent and quick access to global functions such as help and contact us.

Sample wireframe page:
Wireframe: Global Utility Links
Logo: SRA International Logo: Sapient

Last Updated: 2005.04.25