1. View Global Navigation.
Global navigation and utility navigation are required elements that appear in the header section on every page of the site.
The user selects links to desired section of site.
2. Tab selected highlights.
The tab is highlighted in blue and the Mega Menu displays.
3. View Alt Tag Name appears.
Alt tag label with Tab name displays.
4. Sub-section Landing Page.
Selecting the Mega Menu sub-section title links to the relevant sub-page.
5. Navigate to Main site Page.
Select the VMware logo for navigating main site page.
Why Use This Pattern
The user needs to navigate through a site to locate content and features and have clear indication of their current location within the site. Presenting a persistent single-line row of links/tabs in a horizontal bar below in the Global Navigation which is below the site Utility Navigation is a way to provide a high level navigation for the website. The number of categories and lable are not likely to change often. The element should span across the entire width of the page using limited as well as short and easily understood titles. Global navigation and utility navigation are required elements that appear in the header on every page of the site. The importance of navigation cannot be overstated. The current selected tab shouild be clearly highlighted to provide the user 'a sense of place".
Complementary to the Global Navigation is the Mega Menu which is a drop down menu that lists the selected section's sub-links.
What is the Solution
Navigation links to the major sections within the websitel ocated across the top of every page. It is below the Utility Navigation. Each link in the Top Navigation has a dropdown Mega Menu with corresponding sub-section links.
- A horizontal bar contains the different sections or categories of your website.
- Each section or category is represented by a tab that resembles a button. This is why the whole button should be clickable, and not just the text that labels the section.
- Optionally, a bar below the top bar can contain subsections of the currently selected item in the top bar
- The same navigation tab is used on all pages that is linked from the navigation tab.
- 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.
- The current selected tab should visually stand out compared to the un-selected tabs.
When to Use This Pattern
For large websites, or applications with multiple defined sections. It is necessary for large websites to assist the user with understanding the top sections and associated sub-sections and to easily navigate to them. The Global Navigation is used to navigate to the Main Site Page, Products, Downloads Consulting, Partner Prrograms and Compnay pages. The Mega Menu is used as a container for the sub-links to these pages. Use this pattern when"
- There are 3 - 10 category titles.
- The category titles are relatively short and predictable.
- The number of categories is not likely to change often.
- The entire width of the page is needed for content. An alternative approach is to use a left bar navigation
- The categories belong to a single site.
- To represent the highest level navigation options on a site.
- To indicate the user's current location in the set of available options.
- To change the entire page and not a sub-section of content within the page.
- To control the highest level of navigation.
Do Not Use This Pattern
- Do not use when wanting to show content-specific data.
- Do not use when the list of sections or categories call for a “more…” link. Then consider another navigation pattern.
- Do not use for navigation to Social Network entities.