{% load recurse %}

<nav id="main-nav" role="navigation">

  {% recurse menu.menu_set.all|dictsort:"lvl" with menu as menu %}
    <ul {% if menu.count %}id="main-menu" class="sm sm-blue"{% endif %}>
    {% loop %}
    <li {% if not menu.status %}style="display:none;"{% endif %}><a href="{% if menu.has_children %}#{% else %}{{ menu.url }}{% endif %}"> <span>{{menu.title}}</span></a>
    {% child %}
    </li>
    {% endloop %}
    </ul>
  {% endrecurse %}

</nav>
<!--
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>

    {% recurse menu.menu_set.all|dictsort:"lvl" with menu as menu %}
    <ul class="nav navbar-nav">
    {% loop %}
    <li class="dropdown" {% if not menu.status %}style="display:none;"{% endif %}><a href="{% if menu.has_children %}#{% else %}{{ menu.url }}{% endif %}"> <span>{{menu.title}}</span></a>
    {% child %}
    </li>
    {% endloop %}
    </ul>
  {% endrecurse %}

    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li> 
        </ul>
      </li>
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul>
  </div>
</nav>-->
<!--
<div class="row" id="top_menu">
<div class="container">
<div class="row menu_items">
    {% recurse menu.menu_set.all|dictsort:"lvl" with menu as menu %}
    <ul class="nav nav-pills pull-left">
    {% loop %}
    <li {% if not menu.status %}style="display:none;"{% endif %}><a href="{% if menu.has_children %}#{% else %}{{ menu.url }}{% endif %}"> <span>{{menu.title}}</span></a>
    {% child %}
    </li>
    {% endloop %}
    </ul>
  {% endrecurse %}

</div>
</div>
</div>-->