Panels

Duis a ultrices ante. Praesent suscipit porttitor dui ultricies auctor. Nunc pharetra nibh justo, vitae fermentum sapien malesuada et. Duis elementum arcu nec enim sagittis interdum. Praesent gravida lacinia ipsum, et rutrum felis posuere nec. Duis ipsum ipsum, consectetur in molestie non, dignissim eget ex. Maecenas ut fermentum libero. Mauris eu libero sollicitudin, pulvinar nunc id, facilisis odio.

Regular

<nav class="panel">
  <ul>
    <li><a href="...">...</a></li>
    <li class="active"><a href="...">...</a></li>
    <li><a href="...">...</a></li>
    <li class="seperator"></li>
    <li><a href="...">...</a></li>
  </ul>
</nav>

Icons

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus odio nesciunt harum neque deserunt deleniti nemo, explicabo id accusamus voluptatum dolor, porro eligendi possimus culpa pariatur. Omnis, dolores ad nam.

Colors

<nav class="panel yellow"></nav>
<nav class="panel blue"></nav>
<nav class="panel red"></nav>
<nav class="panel green"></nav>
<nav class="panel purple"></nav>
<nav class="panel orange"></nav>
<nav class="panel gray"></nav>

Arrows

 
<nav class="panel arrow"></nav>

Arrow locations

 

<nav class="panel arrow top left"></nav>
<nav class="panel arrow top center"></nav>
<nav class="panel arrow top right"></nav>
<nav class="panel arrow bottom left"></nav>
<nav class="panel arrow bottom center"></nav>
<nav class="panel arrow bottom right"></nav>

Filters

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam magni ipsam iure blanditiis consectetur, doloremque nisi, eum dolorum nihil aut sapiente. Quae, ipsam ut adipisci, neque dolorum harum architecto similique.

Filter title
Filter title
Filter title
Filter title
Filter title
Filter title
<nav class="panel">
  <ul class="checkboxes">...</ul>
</nav>

<nav class="panel">
  <ul class="radios">...</ul>
</nav>

Filters subnav

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam magni ipsam iure blanditiis consectetur, doloremque nisi, eum dolorum nihil aut sapiente. Quae, ipsam ut adipisci, neque dolorum harum architecto similique.

Filter title
<nav class="panel">
  <div class="header">...</div>
  <ul>
    <li class="subnav">
      <input type="checkbox" id="..." />
      <label for="...">
        ...
        <svg class="icon">...</svg>
      </label>
      <ul class="checkboxes">...</ul>      
    </li>
  </ul>
</nav>

<nav class="panel">
  <div class="header">...</div>
  <ul>
    <li class="subnav">
      <input type="checkbox" id="..." />
      <label for="...">
        ...
        <svg class="icon">...</svg>
      </label>
      <ul class="radios">...</ul>      
    </li>
  </ul>
</nav>

Forms

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, sunt animi porro dolor, alias velit, quod consectetur corrupti esse optio qui. Dolorum dignissimos debitis laborum, quis nobis aperiam illo aliquam.

<nav class="panel">
  <form>...</form>
</nav>