Style 1: Single line navigation
By default, this design pattern provides a very simple list of navigation options.
<nav class="style1 callto">
<ul>
<li><a href="#" class="palette2 swatch6">selection 1</a></li>
<li><a href="#" class="palette2 swatch6">selection 2</a></li>
<li><a href="#" class="palette2 swatch6">selection 3</a></li>
<li><a href="#" class="palette2 swatch6">selection 4</a></li>
<li><a href="#" class="palette2 swatch6">selection 5</a></li>
</ul>
</nav>
You can add as many elements as you wish. The list elements will be as high as required by the content, though we recommend being succinct in your writing as these are just for navigation.
With auto-height adjustment
Sometimes you may wish to have all the elements the same height. This can be achieved with the autoheight class.
See this example:
<nav class="style1 callto autoheight">
<ul>
<li><a href="#" class="palette2 swatch6">selection 1</a></li>
<li><a href="#" class="palette2 swatch6">selection 2. Lorem ipsum dolor sit amet, aliquet. Parturient conubia vitae inceptos lobortis enim curabitur ante dui: urna mollis curae euismod faucibus porta, mattis.</a></li>
<li><a href="#" class="palette2 swatch6">selection 3</a></li>
</ul>
</nav>