Simple navigation renderer

‹ Back

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

In order to use this renderer in your app, you will need to register the renderer in your navigation.rb file.

# config/navigation.rb
SimpleNavigation.register_renderer :ornament_menu => OrnamentNavRenderer
<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>

A note about IDs

One of the benefits of this renderer is that also comes with the ability to customise the key ids to a namespace with id_namespace.

This is required if you have multiple menus using any of the same navitems, eg in the case of seperate desktop and mobile navigation. If you have multiple menus using either no namespace or the same namespace, you will notice duplicate id errors in the console and any toggles may start triggering multiple times. Best practice is to always define a namespace.


Customising renderer

Like all of Ornament, the renderer is generated in to your project so you can customise to suit your needs. The renderer is generated in to /app/renderers/ornament_nav_renderer.rb.


No icons

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

<div class="navigation">
  <div class="layout--container">
    <nav>
      <%= koi_render_navigation "header_nav", "header_navigation", renderer: :ornament_menu, level: 1..2, expand_all: true, no_icons: true %>
    </nav>
  </div>
</div>

Hover instead of toggle

no_toggle: true will disable the click-to-toggle subnavigation behaviour. Keep in mind that doing this will negatively impact the accessibility of the menu and is not recommended.

<div class="navigation">
  <div class="layout--container">
    <nav>
      <%= koi_render_navigation "header_nav", "header_navigation", renderer: :ornament_menu, level: 1..2, expand_all: true, no_icons: true, no_toggle: true %>
    </nav>
  </div>
</div>

Basic

If you are intending to hide the arrows and disable the toggle functions, you may be interested in the basic option which removes all toggles and icons and generates just a nested unordered list for use with things like the Drilldown component or anything else that requires just a regular old ul.

<div data-drilldown>
  <%= koi_render_navigation "header_nav", "header_navigation", renderer: :ornament_menu, level: 1..2, expand_all: true, basic: true %>
</div>

No renderer

If you aren't using simple-navigation, you can leverage the navigation classes in your HTML to produce basic hover navigation variation:

<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>