How do you handle complex navigation in Craft? This seriously can't be this hard. How are you handling complex navigation on your sites? Do you hard-code them? Do you use a dedicated "Menu" Structure Section? I am curious what everyone is doing.

I have a few customers who really need to have control over their menu and its structure, but as I build the templates, I am finding I need complete control over the first level and especially the sub/children of them. I am finding it nearly impossible to come up with a way to be able to loop through children and style them how I need to.

Basically, I am trying to access the Dropdown portion of this menu example and as you can see, I need to be able to add a class and data-toggle to those items.

&lt;nav class="navbar navbar-default" role="navigation"&gt;
  &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
    &lt;ul class="nav navbar-nav"&gt;
      &lt;li class="active"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropdown"&gt;
        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/nav&gt;
If the {% nav %} tag doesn't give you enough control over the output, you can always replicate the behavior with custom loops and the getChildren() method. Just nest them as far as your navigation hierarchy possibly gets.

Edit:

Here an example code on how you'd dynamically call getChildren() on each top-level entry of your structure. If you need to go deeper another level in the structure's hierarchy, I marked the line where you would do that:

&lt;ul class="Navigation"&gt;

    {# Get top-level entries in pages structure (exclude home page)  #}
    {% set pages = craft.entries.section('pages').id('not 1').level(1) %}

    {# Loop through top-level entries #}
    {% for page in pages %}

        {# Check if entry has descendants #}
        {% if not page.hasDescendants %}

            {# List navigation item if entry has NO child entries #}
            &lt;li class="Navigation-item"&gt;
                &lt;a href="{{ page.getUrl }}" class="Navigation-link"&gt;{{ page.title }}&lt;/a&gt;
            &lt;/li&gt;

        {% else %}

            {# List navigation item if entry does have child entries #}
            &lt;li class="Navigation-item Navigation-item--dropdown"&gt;

                &lt;a href="{{ page.getUrl }}" class="Navigation-link Navigation-link--dropdown"&gt;{{ page.title }}&lt;/a&gt;
                &lt;ul class="Navigation Navigation--subMenu"&gt;

                    {# Get child entries of current iteration's top-level entry #}
                    {% set subPages = page.getChildren() %}

                    {# Loop through those 2nd-level entries #}
                    {% for subPage in subPages %}

                        {# This is the place where you'd nest the next menu hierarchy !! #}

                        {# List sub-menu navigation item #}
                        &lt;li class="Navigation-item Navigation-item--subMenu"&gt;
                            &lt;a href="{{ subPage.getUrl }}" class="Navigation-link Navigation-link--subMenu"&gt;{{ subPage.title }}&lt;/a&gt;
                        &lt;/li&gt;

                    {% endfor %}

                &lt;/ul&gt;
            &lt;/li&gt;
        {% endif %}
    {% endfor %}

&lt;/ul&gt;


.

Because most of your question's topics are already covered by other Q/As, I'd also recommend you to read through these too.

How to realize a client editable navigation:


Would you use a Structure as navigation over multiple sections?
How to build a great multi-lingual navigation witch channels, structure, and manageable in the CP
Multi-lingual site navigation made of singles, channels and structure
Add home page to a stucture?


More control over the HTML output of the nav tag:


Custom or complex nav tag