website/_includes/nav.html

<div id="fixed_header" class="fixedHeaderContainer{% if include.alwayson %} visible{% endif %}">
  <header>
    <a href="{{ site.url }}{{ site.baseurl }}/"><img src="{{ site.baseurl }}/static/logo.png" alt=""/><h2>{{ site.title }}</h2></a>
    <div class="navigationWrapper navigationFull" id="flat_nav">
      <nav class="navigation" role="navigation" aria-label="Website navigation">
        <ul>
          {% for item in site.data.nav %}
          <li class="navItem {% if page.collection == item.category or page.category == item.category %}navItemActive{% endif %}">
            <a href={{ item.href }}>{{ item.title }}</a>
          </li>
          {% endfor %}
        </ul>
      </nav>
    </div>
    <div class="navigationWrapper navigationSlider" id="navigation_wrap"></div>
  </header>
  <script>
    var event = document.createEvent('Event');
    event.initEvent('slide', true, true);
    document.addEventListener('slide', function (e) {
      document.body.classList.toggle('sliderActive');
    }, false);
    var navData = [
      {% for item in site.data.nav %}
      {
        href       : "{{ item.href }}",
        text       : "{{ item.title }}",
      },
      {% endfor %}
    ];
  </script>
  <script type="text/javascript">
  window.addEventListener('load', function() {
    var Nav = React.createClass({displayName: "Nav",
      getInitialState: function() {
        return {
          currentPath: window.location.pathname,
          slideoutActive: false,
        };
      },
      getDefaultProps: function() {
        return {
          data: navData,
        }
      },
      handleClick: function(id) {
        this.setState({
          slideoutActive: false,
        });
        document.dispatchEvent(event);
      },
      handleSlide: function(id) {
        this.setState({
          slideoutActive: !this.state.slideoutActive,
        });
        document.dispatchEvent(event);
      },
      // TODO: Add aria-label, aria-controls, and aira-expanded
      render: function() {
        var classes = React.addons.classSet({
          'navSlideout': true,
          'navSlideoutActive': this.state.slideoutActive,
        });
        var navClasses = React.addons.classSet({
          'slidingNav': true,
          'slidingNavActive': this.state.slideoutActive,
        });
        return (
          React.createElement("div", null,
            React.createElement("div", {className: classes, onClick: this.handleSlide},
              React.createElement("i", {className: "fa fa-bars"})
            ),
            React.createElement("nav", {className: navClasses},
              React.createElement("ul", null,
                this.props.data.map(this.renderNavItems)
              )
            )
          )
        );
      },
      renderNavItems: function(child, index) {
        var classes = React.addons.classSet({
          'navItem': true,
          'navItemActive': this.state.currentPath === child.href,
        });
        return (
          React.createElement("li", {key: index, className: classes},
            React.createElement("a", {onClick: this.handleClick, href: child.href}, child.text)
          )
        );
      },
    });

    function render(navData) {
      React.render(
        React.createElement(Nav, {data: navData}),
        document.getElementById('navigation_wrap')
      );
    }
    render(navData);
  });
  </script>
</div>