Navigational elements

  • Buttons, lists, drop down, fly out, breadcrumbs: Does it even matter?
  • Headers, footers, sidebars

The navigational elements of your website are the most obvious link between the user interface and the information architecture. These elements connect what Garrett would call the surface to the structure. Without clearly thought out and obvious navigational elements the user can’t rally go anywhere inside the site. It is easy to get hung up on trying to decide what the type of navigational element should be used. Types of navigational elements in this context are they interaction methods of the element. An example of a navigational element might be a series of buttons, a vertical or horizontal list of links, or a flyout menu that expands as the user hovers over an option.

Examples of Menus

The Amazon left hand vertical navigation has flyout feature that \expands the menu as the user rolls over the options with their mouse.

A list apart uses a top aligned horizontal menu.

The primary menu is usually associated with the top part of the page, referred to as the header. This terminology has become so common that the new HTML5 specifications actually include the term header as an option. This is likely because so many website were using a division or <div> that was called header.

Secondary Navigation

Sometimes a secondary navigation panels is presented and this can be used for on page navigation or simply providing a secondary list of options for the user that are related to the initial navigational selection. This navigation is often placed in a sidebar to the left or right of the content.


The breadcrumb menu is named after the fabled “Hansel and Gretel” who left a trail of breadcrumbs to find their way out of the woods. In webdesign the breadcrumb menu is similar in concept, it displays a list of the pages the user visited on their way to their current destination. The practice of leaving a trail for the user to follow is a recoomended practice by usability experts such as Jakob Nielsen, who has advocated their use since “recommended breadcrumbs since 1995.


Leave a Reply

Your email address will not be published.