La navegación secundaria es un elemento complejo que por sus características se presenta en una página separada: Ejemplo de navegación secundaria.
La navegación secundaria se señala con el id #secondary-nav y la clase .secondary-nav. Si el li está activo se le añade la clase .is-active.
Las subnavegaciones de segundo y tercer nivel se identifican con las clases .secondary-nav__level2 y secondary-nav__level3 respectivamente.
Los iconos de cada enlace y nivel son independientes y se introducen directamente en el HTML.
<ul id="secondary-nav" class="secondary-nav">
<li>
<a href="#">
<span class="float-right">
<span aria-hidden="true" class="icon icon--after icon--arrow-down"></span>
</span>Item de primer nivel
</a>
</li>
<li class="is-active">
<a href="#">
<span class="float-right">
<span aria-hidden="true" class="icon icon--after icon--arrow-up"></span>
</span>Item de primer nivel
</a>
<ul class="secondary-nav__level2">
<li>
<a href="#">Item de segundo nivel</a>
</li>
<li>
<a href="#">Item de segundo nivel</a>
<span class="float-right">
<span aria-hidden="true" class="icon icon--after icon--external-link"></span>
</span>Item de tercer nivel
</li>
<li>
<a href="#">Item de segundo nivel</a>
</li>
</ul>
</li>
<li>
<a href="#">
<span class="float-right">
<span aria-hidden="true" class="icon icon--after icon--arrow-down"></span>
</span>Item de primer nivel
</a>
</li>
</ul>
La navegación secundaria está localizada en la parte inferior del HTML de la página. Para reordenarla en pantallas pequeñas, se emplea una función de JavaScript llamada AppendAround.
Para emplear esta reordenación, los div que sean posibles contenedores de la navegación comparten el mismo atributo data-append-container="secondary-nav", y mediante media queries, se muestra el contenedor que convenga y se ocultan el resto. La función mueve el contenido, marcado con el atributo data-append, al contenedor visible.
La reordenación responsive está combinada con la función Collapse, que permite hacer un desplegable. De esta manera, el lanzador .secondary-nav-trigger se oculta cuando no es necesario, y se muestra cuando la navegación se ha movido al div con la clase .secondary-nav-alt-container, que está dentro del bloque colapsable.
<div class="secondary-nav-trigger">
<div data-collapse class="container">
<a href="#secondary-nav" data-collapse-trigger class="secondary-nav-trigger__link">
Menú
<span aria-hidden="true" class="icon icon--arrow-down float-right"></span>
</a>
<div data-collapse-content class="collapse__content">
<div data-collapse-inner data-append-container="secondary-nav" class="secondary-nav-alt-container"></div>
</div>
</div>
</div>
…
<div data-append-container="secondary-nav" class="secondary-nav-main-container">
<ul data-append class="secondary-nav">
…
</ul>
</div>