Hierarchical Model Global Navigation This example shows global

Hierarchical Model

Global Navigation : ¢ This example shows global navigation tabs at the top of the page. Underneath the tabs are the subcatgories (Categories, Brands, Departments, etc. ) of the current top-level category (Women).

Global Navigation : ¢ This example has global navigation along the top and along the left. The links on the left are the dominate global navigational element, linking to the site's top-level categories.

Down-to- Child Link ¢ Links that provide access to more specific information, allowing users to drill down into a particular topic.

Down-to- Child Link ¢ In this example, Down-to-Child links are presented in a threecolumn list in the center/right area of the page. The links, along with the photograph, are the dominant page elements.

Down-to- Child Link ¢ This example shows a promotion-centric layout: Down-to-Child links on the left, with the center of the page devoted to promotional content.

Down-to- Child Link ¢ This example also shows Down-to. Child links on the right, with the main content area being used for promotional purposes.

Across -to- Sibling Link ¢ Across-to-Sibling links provide access to pages that share the same parent, allowing users to navigate across a level in a hierarchy.

Across -to- Sibling Link ¢ This example places Across-to. Sibling Links on the left side of the page in a pull-down menu. While the pull-down menu conserves screen real estate, it forces the user to take action to view the Sibling links. This site has since replaced the pull-down menu with a list of Sibling links.

Across -to- Sibling Link ¢ Here, Sibling links of Lipsticks” (Lip Liners, Lip Treatment, Lip Gloss) appear at the top of the page. Above the Sibling links is as rather unusual presentation of the Parent level links (Lips, Eyes, Nails, Face, Gift sets) part of a breadcrumb (Beauty>Make-up).

Across -to- Sibling Link ¢ In this example, the current page Irons is highlighted in the right-hand list of Sibling categories (Air Conditioners, Fans, Heaters, etc. ).

Across -to- Sibling Link ¢ This product page (Small Six-Ring Binder) presents related product options as Sibling links (Large Six-Ring Binder, Refill Sheets) in the main content area.

Up-to-Parent Link ¢ Up-to-Parent Links provide access to less specific information, allowing users to navigate up a level in the information hierarchy.

Up-to-Parent Link ¢ This page shows an example of a treebrowser type navigation system on the left, where clicking on links exposes branches of the hierarchy. Waders, Wading Boots, and Wading Accessories are links to the Parent level. The links Breathable, Neoprene, Nylon, (etc. ) represent Across-to-Sibling links.

Up-to-Parent Link ¢ This example shows one solution to the problem of displaying a horizontal navigation bar underneath a set of tabs (where the space available for links is very limited). Here, the Up-to-Parent links are organized into short columns at the top of the page.

Up-to-Parent Link ¢ This layout uses white space to separate elements on the page, with Up-to. Parent links on the right. The Categories pull-down in the upper right of the page lists top-level categories and subcategories.

Down-to-Grandchild Link ¢ Down-to-Grandchild links provide access to content two levels down from the current page, allowing users to quickly navigate to subtopics for a given category.

Down-to-Grandchild Link ¢ In this example, a subset of the Downto-Grandchild links are listed on the left, under a heading that is a Down-to. Child link. The more” link also provides access to the Child page

Down-to-Grandchild Link ¢ In this example, a subset of Down-to. Grandchild links are listed in the page's main content area. Child pages (Twin sets, Cardigans, etc. ) are emphasized with photographs; selected Grandchild pages are listed to the right of the photograph.

Down-to-Grandchild Link ¢ This example presents all (rather than selected) Down-to-Grandchild link on the right side of the page. The number of product models in each Grandchild category provides further information on what content is available two levels down from this page.

Main Navigation Element Navigation Bar ¢ Frame-based Navigation ¢ Pull-Down Menu ¢ Pop-Up Menu ¢ Image Map ¢ Search Box ¢

Frame-based Navigation

Pull-Down Menu ¢ Requires the user to click a control in order to view a list of links. These are most commonly implemented as a standard HTML element, but also can be implemented as custom pulldown menus created using a script or applet.