The div#navigation contains the primary navigation element of the site. This can be presented in a nested structure if needed. The full navigation should be contained in this structure, including the secondary and tertiary navigation levels. If you are working with a very large sum of navigation elements which could potentially slow down initial page loading sublevels of navigation could be loaded using AJAX.

<div id="navigation"> <ul class="navigation"> <li class="front"><a href="/">Frontpage</a></li> <li class="docs"> <h6>Documentation</h6> <ul class="subjects"> <li class="front"><a href="/">Frontpage</a></li> </ul> </li> <li class="principles"><a href="/principles">Principles</a></li> </ul> </div>

The div#navigation should be positioned after div#content in the div#page hierarchy because when looking at HTML from a Mobile First perspective you don't want the user to scroll past a massive navigation before reaching the actual content. However it is a common pratice to rearrange the DOM with JavaScript on desktop devices to place the div#navigation in front of div#content.

The div#navigation should not contain any service navigation elements. These should be placed in a ul.servicenavigation in the div#header or the div#footer depending on user relevance.