Page navigation

‹ Back

Managing tree levels

Simple-navigation makes it really easy to have one single tree, which is what Koi has by default, and allow rendering different parts of that tree.

For example, your header might be using level: 1..3 to render three levels of navigation, but on your internal page you want only level: 2..3.

Understand that navigation will only render if the current page path is in the navigation tree.


Conditionally showing sidebar if needed

Sometimes you have a general page show view, eg. /app/views/pages/show.

Sometimes you need this view to show a sidebar when there are links available, and sometimes you need it to not show anything if the page is standalone.

The easiest way I've found to do this is to use a temporary yield.

<%# This is our temporary navigation yield %>
  <% content_for :page_navigation do %>
    <%= koi_render_navigation "page_navigation", "header_navgiation" %>
  <% end %>

  <%# This navigation yield will only render if navigation was present %>
  <% if content_for? :page_navigation %>
    <% content_for :sidebar %>
      <div class="page--navigation">
        <%= yield :page_navigation %>
      </div>
    <% end %>
  <% end %>

Renderer

You can take advantage of the ornament_menu simple navigation renderer to create a subnavigation style.

Use open_active_toggle to open the current tree by default.

Descriptions, using descriptions: true are also supported by default here too.

This example uses custom +/- icons rather than the default chevron.

<div class="page-navigation">
  <nav aria-label="Global Navigation">
    <%= koi_render_navigation({
      cache_key: "header_nav",
      nav_items_fetch_key: "header_navigation",
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "example-page-navigation",
      class_prefix: "page-navigation",
      toggles: "split",
      open_active_toggle: true,
      descriptions: true,
      icons: {
        expand: icon("close"),
      },
    }) %>
  </nav>
</div>

We suggest using the toggles: "split" option, however you can also use it without:

<div class="page-navigation">
  <nav aria-label="Global Navigation">
    <%= koi_render_navigation({
      cache_key: "header_nav",
      nav_items_fetch_key: "header_navigation",
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "example-page-navigation-no-split",
      class_prefix: "page-navigation",
      toggles: true,
      open_active_toggle: true,
      descriptions: true,
      icons: {
        expand: icon("close"),
      },
    }) %>
  </nav>
</div>