Top navigation bar (tops navigation bar)

This may be the simplest and most commonly used component, so there is not much content ....

Users need to find the necessary content and functionality to complete the task. The top navigation bar provides access to the user's categorized content in a compact, horizontal space.

Solve what problem?

Users need to find the necessary content and functionality to complete the task.

When do you use it?

2-12 Categories

The titles of categories are relatively short and predictable

The number of categories will not change basically

When you show a top-level navigation for a web product

Match the label to show level two navigation

If the width of the page is important, use it instead of the left navigation bar

It is difficult to track and display the user's current position by controlling the state of the navigation bar, replacing the label with the cost.

When categories belong to a product

What is the specific solution?

1. Display a series of links on a horizontal bar, and if there is a website head, put it under the head.

2, can be used in conjunction with the "label", in the navigation bar to display both level one and two level navigation

3, if only the use of the top navigation bar, the best first link is "home". Should point to the homepage of the website

But if the top navigation bar is used under a set of labels, then the first one should be "home" and have the same function

4, in the navigation bar with white and "Pipe" "|" (or a vertically centered "dot" or a simple visual element) to separate each category

5, the top of the link in the navigation bar of all the pages themselves must be shown in the top of the navigation bar

6, the When top department navigation bar quantity is overmuch, the proposal uses "more ..." Links, or consider using the left navigation bar

7, with the label used to show the content of the high level

8, with the left navigation bar used to display level two or three level content

Focusing on the scope of the content (in line with the user's mental model) is more important than focusing on the presentation of the page. Because the most common mistake is to classify a series of meaningless content into one category.

1. Reduce the intersection between categories as much as possible

2. Make the boundaries between categories as clear as possible (for example, it's easy to guess whether something you want is in a category)

3, avoid too broad or too special classification name.

Why use this component?

The top navigation bar provides users with a convenient, concise and classified display, allowing users to access a wide range of organized content.

Original address: http://developer.yahoo.com/ypatterns/navigation/bar/topnav.html

Article Source: pd4.me/blog/reprint Please indicate the source link.