Skip to content
This repository has been archived by the owner on Nov 9, 2022. It is now read-only.

Entity Nav Main

loganfranken edited this page Nov 25, 2012 · 4 revisions

The base concept of this entity is a horizontal navigation bar, separate from the "bar" navigation entity (which generally sits at the very top of the viewport), but generally located near the header of the website to denote it as the "primary" form of navigation.

Extending this base concept, the "main" navigation entity could potentially comprise a number of UI patterns:

Simple Form

The "simple form" would include a simple list of links.

For example, Lifetree Creative's main navigation is a simple list of right-aligned links, with the current section highlighted.

Images are often included alongside the link text, as in the main navigation of MacRabbit.

Tabs

The entity could allow for tabbed, hierarchical navigation: the topmost links in the navigation list would contain child links that would display in a content area after a User interacts with the parent link.

For example, Users can click the major section links within the UCLA Gateway's main navigation to display a list of sections within that major section. This list can be closed by clicking another major section or by clicking "Close (X)".

The tabbed content can also appear upon hover, as in the main navigation menu for Designsensory. In this menu, the tabbed content for the current section is automatically displayed, allowing the navigation to contain both primary and secondary navigation.

Mega Menu

Building on the tab concept, many main navigation patterns are "mega menus," in that they contain tabbed, drop-down content areas with significant content and layout.

At Action Envelope, for example, a large area of content appears when you hover over the main navigation items. The structure of the content within this drop-down can vary greatly between navigation items. Note that in the Action Envelope example, clicking the topmost navigation items still directs the User to a section despite the parent item being associated with a mega menu drop-down.

Clone this wiki locally