Left Navigation v0.2.0+ HelixUI v0.2.0 or later required

Left Navigation provides a menu of navigation items that a user clicks to move to another page or location within the application they are using. Because it is easier for a user to scan, left navigation is preferred over secondary navigation.

Left (Vertical) Navigation

<nav class="hxNav">
  <a href="#">Link 1-1</a>
  <a href="#">Link 1-2</a>
  <a href="#">Link 1-3</a>

  <hx-disclosure aria-controls="section-1">
    L1 Section
    <hx-icon class="toggle-icon" type="angle-down"></hx-icon>
  </hx-disclosure>
  <hx-reveal id="section-1" open>
    <a href="#">Link 2-1</a>
    <a href="#">Link 2-2</a>
    <a href="#">Link 2-3</a>

    <hx-disclosure aria-controls="section-1-2">
      L2 Section
      <hx-icon class="toggle-icon" type="angle-down"></hx-icon>
    </hx-disclosure>
    <hx-reveal id="section-1-2" open>
      <a href="#">Link 3-1</a>
      <a href="#">Link 3-2</a>
      <a href="#">Link 3-3</a>
    </hx-reveal>
  </hx-reveal>
</nav>

See Also