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">
  <nav>
    <%= koi_render_navigation "header_nav", "header_navigation", renderer: :ornament_menu, level: 1..3, expand_all: true, id_namespace: "example1" %>
  </nav>
</div>

Accessability features

When used in conjuction with the simple-navigation.js, your navigation menus will gain several accessibility features:

When focused on a first-level parent item, you can press down or space to open the menu and focus on the first link.

When focused on second-level or third-level items, you can press up or down to cycle focus through the list links.

When focused on a second-level parent item, you can press right or space to open the child menu.

When focused on a third-level item, you can press left to close the menu and focus on the parent button.

Any second or third-level menus can be closed with esc, one level at a time. Closing will focus on the opener.


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.


Split parent icons

If you would like parent items to act as links with a secondary button to toggle child menus, you can use the split_parents: true option:

<div class="navigation">
  <nav>
    <%= koi_render_navigation "header_nav", "header_navigation", renderer: :ornament_menu, level: 1..3, expand_all: true, id_namespace: "example-split", split_parents: true %>
  </nav>
</div>

No icons

no_icons: true will render the menu without the automatic svg arrow icons, this could be useful if you want to use CSS arrows instead.

<div class="navigation">
  <nav>
    <%= koi_render_navigation "header_nav", "header_navigation", renderer: :ornament_menu, level: 1..3, expand_all: true, id_namespace: "example2", no_icons: true %>
  </nav>
</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">
  <nav>
    <%= koi_render_navigation "header_nav", "header_navigation", renderer: :ornament_menu, level: 1..3, expand_all: true, id_namespace: "example3", no_icons: true, no_toggle: true %>
  </nav>
</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..3, expand_all: true, id_namespace: "example4", 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">
  <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 class="navigation">
  <div class="layout--container">
    <nav class="navigation__simple">
      <%= koi_render_navigation "header_nav", "header_navigation", renderer: :sf_menu, level: 1..3, expand_all: true %>
    </nav>
  </div>
</div>