Navigation

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.

Navigation

More markup