Why Use This Pattern
To provide users with commonly used links consistently across the entire site. These utility and navigational elements would be consistently displayed on every page. Thus, it becomes a 'You are here' signpost as well as a navigational device.
What is the Solution
Top horizontal utility navigation is the primary navigational tool for the site. The same structure (order) of the navigation tabs should be maintained from page to page, so that the user can relate the navigation of the different pages to each other.
If subsections are used (a second horizontal bar below the top bar), there should be a clear visual connection between the currently selected top tab and the bar below showing subsections. Other complimentary navigational patterns can be employed to help the user traverse and use the site. Other navigational patterns, such as, footer and top navigation, provide rich navigational options. The site's Information Architecture's complexity and hierarchy drives the necessity of which navigational elements to use. When combined with dropdown sub-navigation, the top horizontal bar navigation design pattern can hold more link options.
This pattern has the following specifications:
- Normal State: provides a visual indication of what content can be navigated to within the context of the website.
- Hover State: provides details when the cursor hovers over the tab.
- Search (with Focus): recognizable by the empty, rectangular box with the magnifier at the end.