Code Club Style Guide

Secondary Navigation

Types of Secondary Navigation

There are two different types of secondary navigation menus that can be employed:

Section navigation
In-section navigation; for providing links to sub-pages within a section (eg in the About section, there may be sub-pages for Team, Contact & Jobs)
Menu navigation
Navigation for screens using the column content layout.

Stacked Navigation

The stacked navigation style is ideal for use in a page's sidebar for navigation within a section of your site. It will always expand to 100% of its parent container's width.

Example
<nav class="o-nav-stacked">
<ul class="o-nav-stacked__list">
<li class="o-nav-stacked__item"><a class="o-nav-stacked__link" href="#">Club Hub</a></li>
<li class="o-nav-stacked__item"><a class="o-nav-stacked__link is-current" href="#">Profile</a></li>
<li class="o-nav-stacked__item"><a class="o-nav-stacked__link" href="#">Another Page</a></li>
<li class="o-nav-stacked__item"><a class="o-nav-stacked__link" href="#">Change Password</a></li>
<li class="o-nav-stacked__item"><a class="o-nav-stacked__link" href="#">More Links</a></li>
<li class="o-nav-stacked__item"><a class="o-nav-stacked__link" href="#">Projects or Something</a></li>
</ul>
</nav>

Horizontal Navigation

Normally for use under a hero banner, the horizontal navigation is useful for pages without a sidebar that still has a few sub-pages.

Text links are always center aligned, and the element will also take up 100% of its parent container. It's designed with the intention that its parent will be as high up in the HTML document heirarchy as possible.

Example
<nav class="o-nav-horiz">
<ul class="o-nav-horiz__list">
<li class="o-nav-horiz__item"><a class="o-nav-horiz__link is-current">Projects &amp; Resources</a></li>
<li class="o-nav-horiz__item"><a class="o-nav-horiz__link">Manage Volunteers</a></li>
<li class="o-nav-horiz__item"><a class="o-nav-horiz__link">Club Settings</a></li>
</ul>
</nav>