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 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.