Nav

HTML

<ul class="nav__group">
  <li class="nav__item">
    <a href="/luke">Luke</a>
  </li>
  <li class="nav__item">
    <a href="/mark">Mark</a>
  </li>
  <li class="nav__item">
    <a href="/john">John</a>
  </li>
  <li class="nav__item nav__item--hl">
    <a href="/about">About us</a>
  </li>
</ul>

Nav (Chapters)

HTML

<nav role="navigation" class="nav__chapters" aria-label="Chapter Navigation">
  <h3 class="fs3">
    Chapter
  </h3>
  <ul class="chapters">
    <li class="chapter">
      <a href="">1</a>
    </li>
    <li class="chapter">
      <a href="2/">2</a>
    </li>
    <li class="chapter">
      <a href="3/">3</a>
    </li>
    <li class="chapter">
      <a href="4/">4</a>
    </li>
    <li class="chapter">
      <a href="5/">5</a>
    </li>
    <li class="chapter active">
      <a href="6/">6</a>
    </li>
    <li class="chapter">
      <a href="7/">7</a>
    </li>
    <li class="chapter">
      <a href="8/">8</a>
    </li>
    <li class="chapter">
      <a href="9/">9</a>
    </li>
    <li class="chapter">
      <a href="10/">10</a>
    </li>
    <li class="chapter">
      <a href="11/">11</a>
    </li>
    <li class="chapter">
      <a href="12/">12</a>
    </li>
    <li class="chapter">
      <a href="13/">13</a>
    </li>
    <li class="chapter">
      <a href="14/">14</a>
    </li>
    <li class="chapter">
      <a href="15/">15</a>
    </li>
    <li class="chapter">
      <a href="16/">16</a>
    </li>
    <li class="chapter">
      <a href="17/">17</a>
    </li>
    <li class="chapter">
      <a href="18/">18</a>
    </li>
    <li class="chapter">
      <a href="19/">19</a>
    </li>
    <li class="chapter">
      <a href="20/">20</a>
    </li>
    <li class="chapter">
      <a href="21/">21</a>
    </li>
    <li class="chapter">
      <a href="22/">22</a>
    </li>
    <li class="chapter">
      <a href="23/">23</a>
    </li>
    <li class="chapter">
      <a href="24/">24</a>
    </li>
  </ul>
</nav>

Nav (Secondary)

HTML

<nav role="navigation" class="nav nav--secondary width--wide">
  <ul class="nav__group">
    <li class="nav__item">
      <a href="#"><i class="icon icon--discuss"></i>Discuss</a>
    </li>
    <li class="nav__item">
      <a href="#"><i class="icon icon--reflect"></i>Reflect</a>
    </li>
    <li class="nav__item">
      <a href="#"><i class="icon icon--read"></i>Read</a>
    </li>
  </ul>
</nav>

Nav (Selected)

HTML

<ul class="nav__group">
  <li class="nav__item selected">
    <a href="/luke">Luke</a>
  </li>
  <li class="nav__item">
    <a href="/mark">Mark</a>
  </li>
  <li class="nav__item">
    <a href="/john">John</a>
  </li>
  <li class="nav__item nav__item--hl">
    <a href="/about">About us</a>
  </li>
</ul>

Nav (Studies)

HTML

<nav class="nav nav--studies">
  <ul class="nav__group">
    <li class="nav__item">
      <a href="#"><i class="icon icon--encounter"></i> <b>Encounter</b></a>
    </li>
    <li class="nav__item">
      <a href="#"><i class="icon icon--hope"></i> <b>Hope</b></a>
    </li>
    <li class="nav__item">
      <a href="#"><i class="icon icon--freedom"></i> <b>Freedom</b></a>
    </li>
    <li class="nav__item">
      <a href="#"><i class="icon icon--transformation"></i> <b>Transformation</b></a>
    </li>
    <li class="nav__item">
      <a href="#"><i class="icon icon--love"></i> <b>Love</b></a>
    </li>
    <li class="nav__item">
      <a href="#"><i class="icon icon--trust"></i> <b>Trust</b></a>
    </li>
  </ul>
</nav>