Cacher is the code snippet organizer for pro developers

# http://www.tournemille.com/blog/How-to-create-data-driven-navigation-in-Jekyll/ 

- title: "Home"
  href: "/"

- title: "Learn"
  href: "/learning-resources/"
  subcategories:
    - subtitle: "Learning topic 1"
      subhref: "/learn1/"
    - subtitle: "Learning topic 2"
      subhref: "/learn2/"
    - subtitle: "Learning topic 3"
      subhref: "/learn3/"

- title: "Tools"
  subcategories:
    - subtitle: "Tools1"
      subhref: "/tools1/"
    - subtitle: "Tools2"
      subhref: "/tools2/"

- title: "Login"
  href: "/login/"

- title: "SIGNUP"
  href: "/signup/"

- title: "Support"
  href: "/support/"

- title: "About Us"
  href: "/about-us/"

<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
  <div class="container">
    
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="{{ site.url }}/index.html"><img src="{{ site.url }}/img/elastic-path-logo.png" width="155"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav navbar-right">
        {% for dale in site.data.nav %}
          <!-- check to see if the data file has a submenu, and if so display it -->
          {% if dale.subcategories != null %}
          <li class="dropdown">
            <a href="{{ site.url }}{{ dale.url }}" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">{{ dale.title }}<i class="fa fa-angle-down"></i></a>
            <ul class="dropdown-menu">
              {% for subcategory in dale.subcategories %}
                <li><a href="{{ site.url }}{{ subcategory.subhref }}">{{ subcategory.subtitle }}</a></li>
              {% endfor %}
            </ul>
            {% else %}

            <!-- display the top level navigation for items that don’t have a submenu -->
            <li>
              <a href="{{ site.url }}{{ dale.href }}">{{ dale.title }}</a>
            {% endif %}
            </li>
          </li>
          <!-- /.dropdown -->
        {% endfor %}
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>