Tray Navigation

‹ Back


The tray navigation has two modes that determine how nested navigation works.

Complex mode allows the user to drill down through the menu levels.

Simple mode allows the user to show/hide children menus similar to accordions.

This is changed in the tray-navigation.js file by setting simple to either true or false.

Scaffolding the menu

The menu requires the following markup to get started. Luckily Ornament comes with this markup out of the box, ready to go!

<div class="layout">

  <div class="layout--mobile-tray">
    <nav class="navigation-mobile">
      <div class="pane-wrapper">
        <div class="pane">
          <div class="pane--navigation-container">

            Navigation list goes here

          </div><!-- .pane--navigation-container -->
  </div><!-- .layout--mobile-tray -->
  <div class="layout--content">

    Website goes here

  </div><!-- .layout--content -->
</div><!-- .layout -->

The navigation links need to be an unordered list (ul) and will need a class of non-pane to indicate that it isn't a pane.

Multiple Menu Lists

Adding multiple menus is as easy as adding another ul with a class of non-pane.

To add multiple Koi navigations, you would do this:

<div class="pane--navigation-container">
  <%= koi_render_navigation "header_nav", "header_navigation", renderer: :sf_menu, level: 1..3, expand_all: true, dom_class: 'non-pane' %>
  <%= koi_render_navigation "footer_nav", "footer_navigation", renderer: :sf_menu, level: 1..3, expand_all: true, dom_class: 'non-pane' %>

Adding additional content to the first pane

Adding content to the first pane is as simple as just adding extra elements after your lists:

    <li><a href="#">Link</a></li>

  <p>Hello, I am in the mobile tray!</p>
</div><!-- .pane--navigation-container -->

Accessing the menu externally

The menu features several public functions that you can call anywhere.

The menu is accessed via the public variable Ornament.C.TrayNav

Public Values

JS Description
Ornament.C.TrayNav.currentLevel Returns how many panes deep the menu is open to.
Ornament.C.TrayNav.simple Returns true or false based on the related setting. See settings for more info on that.

DOM Elements

JS Description
Ornament.C.TrayNav.anchor The menu button that opens/closes the tray.
Ornament.C.TrayNav.tray The tray

Public Functions

JS Description
Ornament.C.TrayNav.openMenu(); Slide the menu open.
Ornament.C.TrayNav.closeMenu(); Slide the menu closed.
Ornament.C.TrayNav.toggleMenu(); Either close or open the menu.
Ornament.C.TrayNav.isOpen(); Returns true or false depending on if the menu is open or not.
Ornament.C.TrayNav.getCurrentTab(); Returns a jQuery object of the parent of the currently open pane.
Ornament.C.TrayNav.goToId(id); Go to the ID of a navigation item (either on the LI or A)
Ornament.C.TrayNav.goBack(); Go back one level
Ornament.C.TrayNav.goToRoot(); Goes back to first pane.
Ornament.C.TrayNav.updateMenuHeight(); Will recalculate everything on the currently visible pane and update the height of the mobile menu accordingly.
Ornament.C.TrayNav.updateMenuHeightWithDelay(); Runs the height update function after waiting the appropriate amount of time for a pane transition to finish.
Ornament.C.TrayNav.updateMenuBindings(); Updates bindings on the anchor, back and forward buttons in case they somehow get lost via AJAX or DOM manipulation.


At the top of tray-navigation.js you can find a bunch of variables ready for changing. These include classes, text strings, animation timings and so on.

Some of the less obvious settings:

jumpToCurrent will decide wether the menu will load in to the current page already visible or if it will start from the top.

simple will fallback to a simple accordion-style menu if set to true.

showOverviewLinks will show overview links on secondary panes. Turn off if parent pages aren't real pages.