<nav class="navbar navbar-default">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="title-menu visible-xs visible-sm">Menu</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                <li class="dropdown {% if currentLocation and currentLocation.id == ezpublish.rootLocation.id %}current-menu{% endif %}">
                    <a href="/" class="dropdown-toggle" ><div class="menu-wrap">Accueil</div></a><span class="mobile-toggle icon-down-open-1"></span>
                </li>

                {% for content in mainMenu %}
                        <li class="dropdown {% if currentLocation and content.contentInfo.mainLocationId in currentLocation.path %}current-menu{% endif %}">
                            <a href="{{ path( 'ez_urlalias', {'locationId': content.contentInfo.mainLocationId} ) }}" class="dropdown-toggle" >
                                {% if content.fields.titre_menus is defined and not ez_is_field_empty( content, "titre_menus" ) %}
                                    <div class="menu-wrap">{{ ez_render_field(content, "titre_menus") }}</div>
                                {% else %}
                                    <div class="menu-wrap">{{ ez_content_name(content)|raw }}</div>
                                {% endif %}
                            </a>
                            {% if subMenuLevel2[content.id] is defined and subMenuLevel2[content.id] %}
                                <span class="mobile-toggle icon-down-open-1"></span>
                                <div class="dropdown-menu">
                                    <div class="container">
                                        <ul class="level-1">
                                            {% for locationIdLevel2,contentLevel2 in subMenuLevel2[content.id] %}
                                                <li><a href="{{ path( 'ez_urlalias', {'locationId': locationIdLevel2} ) }}">
                                                        {% if contentLevel2.fields.titre_menus is defined and not ez_is_field_empty( contentLevel2, "titre_menus" ) %}
                                                            {{ ez_render_field(contentLevel2, "titre_menus") }}
                                                        {% else %}
                                                            {{ ez_content_name(contentLevel2)|raw }}
                                                        {% endif %}
                                                    </a>
                                                    {% if subMenuLevel3[contentLevel2.id] is defined and subMenuLevel3[contentLevel2.id] %}
                                                        <ul class="level-2">
                                                            {% for locationIdLevel3,contentLevel3 in subMenuLevel3[contentLevel2.id] %}
                                                                <li>
                                                                    <a href="{{ path( 'ez_urlalias', {'locationId': locationIdLevel3 } ) }}">
                                                                        {% if contentLevel3.fields.titre_menus is defined and not ez_is_field_empty( contentLevel3, "titre_menus" ) %}
                                                                            {{ ez_render_field(contentLevel3, "titre_menus") }}
                                                                        {% else %}
                                                                            {{ ez_content_name(contentLevel3)|raw }}
                                                                        {% endif %}
                                                                    </a>
                                                                </li>
                                                            {% endfor %}
                                                        </ul>
                                                    {% endif %}
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            {% endif %}
                        </li>
                {% endfor %}
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>