Navigation

‹ Back

Just a simple little starter navigation component to quickly drop-in some global navigation when necessary.

You can see an example of the navigation yielded in :above_layout just under the header.

<div class="navigation">
  <div class="layout--container">
    <nav class="navigation__simple">
      <ul>
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About</a>
          <ul>
            <li>
              <a href="#">History</a>
            </li>
            <li>
              <a href="#">Board Members</a>
            </li>
          </ul>
        </li>
        <li class="navigation--active-item">
          <a href="#">Products</a>
          <ul>
            <li class="navigation--active-item">
              <a href="#">On Sale</a>
            </li>
            <li>
              <a href="#">Other</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</div>
<div class="navigation">
  <div class="layout--container">
    <nav class="navigation__simple">
      <%= koi_render_navigation "header_nav", "header_navigation", renderer: :sf_menu, level: 1..2, expand_all: true %>
    </nav>
  </div>
</div>

Custom Renderer

You can use the ornament_menu simple-navigation renderer to automatically add arrows, toggle and accessibility features.

Note that the navigation__simple class has been removed for this menu, which removes the hover-to-show-subnavigation functionality.

<div class="navigation">
  <div class="layout--container">
    <nav class="simple-navigation__with-toggles simple-navigation__with-icons">
      <ul>
        <li>
          <a href="#" data-navigation-item>Home</a>
        </li>
        <li class="has-children">
          <button data-navigation-parent data-toggle-anchor="key1" data-toggle-timing="100" data-toggle-temporary-anchor aria-expanded="false" data-toggle-anchor-ready>
            About
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 16" style="" class="icon-chevron_right">
  <path class="icon--fill" fill="#000000" d="M11.883,7.748 L2.938,0.081 C2.871,0.023 2.787,-0.005 2.695,0.001 C2.607,0.009 2.525,0.05 2.468,0.117 L0.993,1.838 C0.873,1.977 0.889,2.188 1.029,2.307 L7.67,8.001 L1.029,13.692 C0.889,13.811 0.873,14.022 0.993,14.163 L2.468,15.885 C2.534,15.962 2.628,16.001 2.721,16.001 C2.798,16.001 2.875,15.976 2.938,15.921 L11.883,8.255 C11.957,8.192 12,8.099 12,8.001 C12,7.903 11.957,7.812 11.883,7.748" transform="translate(-1)"/>
</svg>
          </button>
          <div class="simple-navigation--nested" data-toggle="key1" data-toggle-temporary>
            <ul>
              <li>
                <a href="#" data-navigation-item>History</a>
              </li>
              <li>
                <a href="#" data-navigation-item>Board Members</a>
              </li>
              <li>
                <a href="#" data-navigation-item>Executive Team</a>
              </li>
              <li>
                <a href="#" data-navigation-item>Contacts</a>
              </li>
            </ul>
          </div>
        </li>
        <li class="has-children">
          <button data-navigation-parent data-toggle-anchor="key2" data-toggle-timing="100" data-toggle-temporary-anchor aria-expanded="false" data-toggle-anchor-ready>
            Products
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 16" style="" class="icon-chevron_right">
  <path class="icon--fill" fill="#000000" d="M11.883,7.748 L2.938,0.081 C2.871,0.023 2.787,-0.005 2.695,0.001 C2.607,0.009 2.525,0.05 2.468,0.117 L0.993,1.838 C0.873,1.977 0.889,2.188 1.029,2.307 L7.67,8.001 L1.029,13.692 C0.889,13.811 0.873,14.022 0.993,14.163 L2.468,15.885 C2.534,15.962 2.628,16.001 2.721,16.001 C2.798,16.001 2.875,15.976 2.938,15.921 L11.883,8.255 C11.957,8.192 12,8.099 12,8.001 C12,7.903 11.957,7.812 11.883,7.748" transform="translate(-1)"/>
</svg>
          </button>
          <div class="simple-navigation--nested" data-toggle="key2" data-toggle-temporary>
            <ul>
              <li class="navigation--active-item">
                <a href="#" data-navigation-item>On Sale</a>
              </li>
              <li>
                <a href="#" data-navigation-item>Other</a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </nav>
  </div>
</div>
<div class="navigation">
  <div class="layout--container">
    <nav>
      <%= koi_render_navigation "header_nav", "header_navigation", renderer: :ornament_menu, level: 1..2, expand_all: true %>
    </nav>
  </div>
</div>

The ornament_menu renderer has a couple of options:

no_icons: true will render the menu without the automatic svg arrow icons.

no_toggle: true will disable the click-to-toggle subnavigation behaviour. Keep in mind that doing this will drastically impact the accessibility of the menu.

If you are intending to hide the arrows and disable the toggle functions, you may be better off just using the default sf_menu renderer.