KoalaNav

View demo

KoalaNav is a lightweight (~6KB minified) JS plugin that turns a <nav> like this:

<nav>
  <ul>
    <li><a href="#">My list item</a></li>
    <li><a href="#">My list item</a>
      <ul>
        <li><a href="#">My list item</a>
          <ul>
            <li><a href="#">My list item</a></li>
            <li><a href="#">My list item</a></li>
            <li><a href="#">My list item</a></li>
          </ul>
        </li>
        <li><a href="#">My list item</a></li>
        <li><a href="#">My list item</a></li>
      </ul>
    </li>
    <li><a href="#">My list item</a></li>
  </ul>
</nav>

into a responsive menu that wraps nested list items with toggle buttons to expand the children into view.

Installing

1. Add dist/koalanav.css and dist/koalanav.js to your site using <link> and <script> tags.
2. Place the dist/icons.svg image in the same directory as your CSS (or place this where you'd like and update the path in the CSS)
3. Add an ID to your <nav> element
4. Instantiate a new navigation menu like this: <script>var nav1 = new KoalaNav("my-navigation");</script>

Options

KoalaNav has a few options to modify the default behavior:

{
  btnIcon: 'hamburger',       // The type of icon to use for the mobile toggle button. "hamburger" or "arrow"
  btnPosition: 'left',        // The position of the mobile toggle button icon. "left" or "right"
  mobileWidth: 500            // The width (in pixels) of when the mobile menu should be displayed
}

Browser support

• Chrome
• Safari
• Firefox
• IE 11
• IE 10
• IE 9