10. Navigation & Pagination

1
<nav class="xpulse-nav xpulse-box">
2
  <div class="xpulse-nav__item"><a class="xpulse-button xpulse-button--ghost" href="#">Home</a></div>
3
  <details class="xpulse-nav__item xpulse-nav__group xpulse-disclosure xpulse-disclosure--float">
4
    <summary class="xpulse-button xpulse-button--ghost xpulse-disclosure__summary
5
                    xpulse-disclosure__summary--caret-right xpulse-disclosure__summary--float">
6
      Info
7
    </summary>
8
    <div class="xpulse-nav__children">
9
      <div class="xpulse-nav__item"><a class="xpulse-button xpulse-button--ghost" href="#">Team</a></div>
10
    </div>
11
  </details>
12
</nav>

1
<nav class="xpulse-nav xpulse-nav--vertical xpulse-text-left">
2
  <details class="xpulse-nav__item xpulse-nav__group xpulse-disclosure xpulse-nav__item--depth-0" open>
3
    <summary class="xpulse-button xpulse-button--ghost xpulse-button--block xpulse-disclosure__summary">
4
      Group
5
    </summary>
6
    <div class="xpulse-nav__children">
7
      <div class="xpulse-nav__item xpulse-nav__item--depth-1">
8
        <a class="xpulse-button xpulse-button--ghost xpulse-button--block" href="#" data-active="true">Active</a>
9
      </div>
10
      <div class="xpulse-nav__item xpulse-nav__item--depth-2">
11
        <a class="xpulse-button xpulse-button--ghost xpulse-button--block" href="#">Sub-page</a>
12
      </div>
13
    </div>
14
  </details>
15
</nav>

1
<nav class="xpulse-pagination">
2
  <a class="xpulse-button xpulse-button--ghost xpulse-pagination__item" href="#">Prev</a>
3
  <a class="xpulse-button xpulse-button--secondary xpulse-pagination__item" href="#">1</a>
4
  <a class="xpulse-button xpulse-button--secondary xpulse-pagination__item xpulse-pagination__item--active" href="#">2</a>
5
  <a class="xpulse-button xpulse-button--ghost xpulse-pagination__item" href="#">Next</a>
6
</nav>