<p>It sounds like you want utmost flexibility. So instead of trying to write any code for you, let me just describe all of the tools which should make this possible...</p>
<hr />
<p>To begin, you definitely want a <strong>Structure</strong> section. Then your clients will have the complete control that you are looking for... adding, removing, and rearranging their entries (aka pages).</p>
<h3><a href="http://buildwithcraft.com/docs/templating/nav" rel="noreferrer"><code>{% nav %}</code></a></h3>
<p>This one is pretty obvious. Run the whole section through a <code>nav</code> tag like this:</p>
<pre><code>{% nav entry in craft.entries.section('pages') %}
</code></pre>
<p>Within that loop, you can use some of these other tools...</p>
<h3><code>{% ifchildren %}</code></h3>
<p>Also pretty obvious. You'll need this to run sub-loops for all of your nested entries. Every time an entry contains sub-entries, this Twig tag will be triggered (no matter how deep it goes).</p>
<h3><a href="http://buildwithcraft.com/docs/templating/entrymodel#hasDescendants" rel="noreferrer"><code>entry.hasDescendants()</code></a></h3>
<p>Optional. If you want to check if an entry has any children without actually navigating down that branch, you can use this function. In fact, many of the <a href="http://buildwithcraft.com/docs/templating/entrymodel#methods" rel="noreferrer"><code>EntryModel</code> methods</a> can be useful to you in various circumstances.</p>
<h3><a href="http://buildwithcraft.com/docs/templating/entrymodel#level" rel="noreferrer"><code>entry.level</code></a></h3>
<p>This will tell you exactly what level you are on. So for example, &quot;1&quot; is the top level, &quot;2&quot; is their respective children, etc.</p>
<h3><a href="http://buildwithcraft.com/docs/templating/entrymodel#type" rel="noreferrer"><code>entry.type</code></a></h3>
<p>If you're using various entry types (which you probably are), then this will help you sort out which type of entry you're dealing with at that exact moment.</p>
<h3>Bonus: <a href="http://buildwithcraft.com/docs/templating/cache" rel="noreferrer"><code>{% cache %}</code></a></h3>
<p>You can wrap the whole nav in a <code>cache</code> tag to make it easier for the system to deal with in the future.</p>
<hr />
<p>If you feel like I missed something, or that you still don't have the control that you want, just let me know what you're trying to accomplish. I can 99% guarantee that there is an existing Craft way of handling it.</p>
<p>Hope that helps!</p>

CC BY-SA 3.0
2014-08-13T08:54:33.163Z
`{% nav entry in entries %}` makes sense if you want to make use of `{% children %}`. If you want more control over the html of nested items, I'd use basic for loops: `{% for entry in entries %}`.
carlcs
CC BY-SA 3.0
2014-08-13T09:25:56.333Z
I meant the self-nesting feature of the `{% children %}` tag.
carlcs
CC BY-SA 3.0
2014-08-13T16:24:28.790Z
@carlcs He specifies that his nav has children... It seems like a perfect fit to me.
Lindsey D
CC BY-SA 3.0
2014-08-14T16:21:33.590Z
Ok, I didn't know that you can use methods like `level` or `hasDescendants` within the `{% nav %}` tag. But that's great if you can! Always thought `{% nav %}` is something very special and that it is restricted to the simple use case shown in the docs. Thanks for the info, Lindsey!
carlcs
CC BY-SA 3.0
2014-08-14T16:22:31.233Z
Using `{% nav %}` in combination with `level` is probably the cleanest way to add further HTML to a navigation. Marion's solution is really clever, but it seems kind of hacky to "misuse" macros like this.
carlcs
CC BY-SA 3.0
2014-08-13T04:29:06.547Z
2014-08-13T04:29:06.547Z
2020-06-17T08:56:27.903Z
Lindsey D
<p>I am a big fan of using a recursive macro when the <code>{% nav %}</code> tag is not enough. <a href="https://craftcms.stackexchange.com/questions/1779/display-number-based-on-position-in-structure-hierarchy/1809#1809">This answer</a> has an example.</p>

CC BY-SA 3.0
2014-08-12T19:45:15.557Z
2014-08-12T19:45:15.557Z
2017-04-13T12:51:00.160Z
Marion Newlevant
<p>I've posted a recipe for dynamically-generated nav menus which encompasses a lot of logic to determine the active page/section/etc: <a href="https://craftcookbook.net/recipes/fully-dynamic-hierarchical-nav-menu-template" rel="nofollow noreferrer">Fully Dynamic Hierarchical Nav Menu Template</a></p>

CC BY-SA 3.0
2015-08-05T17:47:44.163Z
2017-04-07T15:01:02.270Z
2017-04-07T15:01:02.270Z
Jordan Lev
<p>IMO, this is a much more flexible soloution, albeit a plugin: <a href="https://github.com/am-impact/amnav/" rel="nofollow">https://github.com/am-impact/amnav/</a>  </p>

<p>I have used the methods above, but kept running into issues where a client's single exception to the navigation structure would cause a bunch of extra work.  For example, they might want a single in the middle of a structure hierarchy or a channel entry as the child of a single, typical requests for clients.</p>

<p>Using a dedicated structure for the menus and another for the content only confuses clients and they end up messing things up in result.  </p>

<p>Using the A&amp;M nav plugin solved most of these issues. You can change the Menu label to whatever you want, and having a menu called 'Menus' is much easier for the client than searching through the entries for the 'menu structure' The only drawback to the plugin is that the menus must be added to the manually, however there is a handy Navigation field type to handle that.</p>

<p>Hope this helps.</p>

CC BY-SA 3.0
2015-08-06T19:57:02.813Z
Why did you use two structures, one for the nav and one for the content / metadata. I think it's the whole advantage of that approach to hAve it all together in one structure. To "import" foreign entries from other sections an entry type with an entries field is all you need.
carlcs
CC BY-SA 3.0
2015-08-06T18:30:59.007Z
2015-08-06T18:30:59.007Z
Steve Adams
<p>If the <a href="http://buildwithcraft.com/docs/templating/nav" rel="noreferrer"><code>{% nav %}</code></a> tag doesn't give you enough control over the output, you can always replicate the behavior with custom loops and the <a href="http://buildwithcraft.com/docs/templating/entrymodel#getChildren" rel="noreferrer"><code>getChildren()</code></a> method. Just nest them as far as your navigation hierarchy possibly gets.</p>

<p><strong><em>Edit:</em></strong></p>

<p>Here an example code on how you'd dynamically call <code>getChildren()</code> 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:</p>

<pre class="lang-none prettyprint-override"><code>&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;
</code></pre>

<p>.</p>

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

<p>How to realize a client editable navigation:</p>

<ul>
<li><a href="https://craftcms.stackexchange.com/q/1473/125">Would you use a Structure as navigation over multiple sections?</a></li>
<li><a href="https://craftcms.stackexchange.com/q/1722/125">How to build a great multi-lingual navigation witch channels, structure, and manageable in the CP</a></li>
<li><a href="https://craftcms.stackexchange.com/q/883/125">Multi-lingual site navigation made of singles, channels and structure</a></li>
<li><a href="https://craftcms.stackexchange.com/q/1467/125">Add home page to a stucture?</a></li>
</ul>

<p>More control over the HTML output of the <code>nav</code> tag:</p>

<ul>
<li><a href="https://craftcms.stackexchange.com/q/1733/125">Custom or complex nav tag</a></li>
</ul>

CC BY-SA 3.0
2014-08-12T19:23:16.233Z
Two questions I have for this. 1) How would you dynamically getChildren? Using an ID or something? and 2) You would need to code the exact nav structure and there wouldn't be any flexibility for the client to add another level if they needed to.
Jacob Graf
CC BY-SA 3.0
2014-08-13T13:40:44.470Z
@JacobGraf I just updated my post. This should answer your question on how to get the child entries dynamically. And about that second concern, isn't the exact control over the HTML output of each hierarchy level what you want to achieve?
carlcs
CC BY-SA 3.0
2014-08-14T14:28:22.363Z
This was the answer I was looking for. I appreciate your help. Not sure why you had to insert the rude comments in your responses, but I appreciate it anyway.
Jacob Graf
CC BY-SA 3.0
2014-08-14T15:56:16.983Z
Yes you're right, @Jacob. There was no need for being rude, sorry!
carlcs
CC BY-SA 3.0
2014-10-24T18:05:20.273Z
What's the .id('not 1') for when grabbing the top level entries?
veritascs
CC BY-SA 3.0
2014-10-24T20:39:52.717Z
@veritascs I set this parameter to exclude the homepage from the navigation. It is an entry in my structure (with the id 1), but I don't want it to be output here. You can also exclude it by slug: `.slug('not home')` or exclude multiple entries: `.id('and', 'not 1', 'not 247', 'not 71')` ;)
carlcs
CC BY-SA 3.0
2014-08-12T19:20:56.403Z
2014-08-14T15:44:56.087Z
2017-04-13T12:51:00.253Z
carlcs
<p>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.</p>

<p>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.</p>

<p>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.</p>

<pre><code>&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;
</code></pre>

CC BY-SA 3.0
2014-08-12T18:14:13.537Z
Hey @JacobGraf, there are [lots of other questions](http://craftcms.stackexchange.com/search?q=navigation) on this topic in addition to [P&T's suggestion](http://buildwithcraft.com/help/structure-nav). It'd be best to focus this into a more specific, answerable question or jump into one of the many other more detailed posts.
Matt Stein
CC BY-SA 3.0
2014-08-12T18:19:08.750Z
I have already read Pixel and Tonics answer and my questions stems from it. I need a way to customize the HTML for the "children" and I am not finding any solutions to that problem.
Jacob Graf
CC BY-SA 3.0
2014-08-12T18:21:37.127Z
I would think that the `{% ifchildren %}` and `{% children %}` tags would be sufficient so that you could control them from a parent class, but if I'm oversimplifying then it may still be worth getting more specific with your question.
Matt Stein
CC BY-SA 3.0
2014-08-12T18:25:08.293Z
Yes, you are oversimplifying it. `{% children %}` outputs list items. I need control over the classes on those list items as well as some data-options, etc. It is too simple and I need to find a way to be able to access the children loop and completely customize its output. I have modified my question slightly to help.
Jacob Graf
CC BY-SA 3.0
2014-08-12T18:32:23.707Z
possible duplicate of [Would you use a Structure as navigation over multiple sections (channel entries, indexes and singles)?](http://craftcms.stackexchange.com/questions/1473/would-you-use-a-structure-as-navigation-over-multiple-sections-channel-entries)
carlcs
CC BY-SA 3.0
2014-08-12T18:35:19.437Z
I see, sorry. I reopened the question, which could stand to have some template examples for bonus points.
Matt Stein
CC BY-SA 3.0
2014-08-12T18:35:56.343Z
You really don't want me to be able to ask my question, do you? ;-)

No, it's not a duplicate. The link you sent only deals with the top level items and I need access to the children.
Jacob Graf
CC BY-SA 3.0
2014-08-12T18:43:05.350Z
Edited again and added a code sample. I hope that helps. Thanks.
Jacob Graf
CC BY-SA 3.0
2014-08-12T19:02:57.180Z
It was me who sent the link, and no, it doesn't only deal with top-level entries.
carlcs
CC BY-SA 3.0
2014-08-12T19:24:47.907Z
I just re-read your link and it "kind of" addresses what I need but it seems that using Twig replace would be a huge performance hit if it's having to do all of that work replacing every link. I am really looking for a way to loop through a Structure section dynamically being able to customize my code completely for child entries.
Jacob Graf
CC BY-SA 3.0
2014-08-13T05:39:49.047Z
Where's the performance hit? I made a test with a pretty large Structure and the replace part wasn't even noticeable on execution.
naboovalley
<templating><navigation>
How do you handle complex navigation in Craft?
# How do you handle complex navigation in Craft?

(Asked by: username_0 on 2014-08-12)

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.

  
    
      Link
      Link
      
        Dropdown 
        
          Action
          Another action
          Something else here
          
          Separated link
          
          One more separated link

**Tags:** templating, navigation
> **Comments:**
> **username_1**: Hey @JacobGraf, there are [lots of other questions](http://craftcms.stackexchange.com/search?q=navigation) on this topic in addition to [P&T's suggestion](http://buildwithcraft.com/help/structure-nav). It'd be best to focus this into a more specific, answerable question or jump into one of the many other more detailed posts.  
> **username_0**: I have already read Pixel and Tonics answer and my questions stems from it. I need a way to customize the HTML for the "children" and I am not finding any solutions to that problem.  
> **username_1**: I would think that the `{% ifchildren %}` and `{% children %}` tags would be sufficient so that you could control them from a parent class, but if I'm oversimplifying then it may still be worth getting more specific with your question.  
> **username_0**: Yes, you are oversimplifying it. `{% children %}` outputs list items. I need control over the classes on those list items as well as some data-options, etc. It is too simple and I need to find a way to be able to access the children loop and completely customize its output. I have modified my question slightly to help.  
> **username_2**: possible duplicate of [Would you use a Structure as navigation over multiple sections (channel entries, indexes and singles)?](http://craftcms.stackexchange.com/questions/1473/would-you-use-a-structure-as-navigation-over-multiple-sections-channel-entries)  
> **username_1**: I see, sorry. I reopened the question, which could stand to have some template examples for bonus points.  
> **username_0**: You really don't want me to be able to ask my question, do you? ;-)  No, it's not a duplicate. The link you sent only deals with the top level items and I need access to the children.  
> **username_0**: Edited again and added a code sample. I hope that helps. Thanks.  
> **username_2**: It was me who sent the link, and no, it doesn't only deal with top-level entries.  
> **username_0**: I just re-read your link and it "kind of" addresses what I need but it seems that using Twig replace would be a huge performance hit if it's having to do all of that work replacing every link. I am really looking for a way to loop through a Structure section dynamically being able to customize my code completely for child entries.  
> **username_3**: Where's the performance hit? I made a test with a pretty large Structure and the replace part wasn't even noticeable on execution.  

---

## 5 answers

### Answer by username_2 on 2014-08-12. Score: 20 | Accepted answer

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:


    {# 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 #}
            
                {{ page.title }}
            

        {% else %}

            {# List navigation item if entry does have child entries #}
            

                {{ page.title }}
                

                    {# 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 #}
                        
                            {{ subPage.title }}
                        

                    {% endfor %}

                
            
        {% endif %}
    {% endfor %}



.
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

> **Comments:**
> **username_0**: Two questions I have for this. 1) How would you dynamically getChildren? Using an ID or something? and 2) You would need to code the exact nav structure and there wouldn't be any flexibility for the client to add another level if they needed to.  
> **username_2**: @JacobGraf I just updated my post. This should answer your question on how to get the child entries dynamically. And about that second concern, isn't the exact control over the HTML output of each hierarchy level what you want to achieve?  
> **username_0**: This was the answer I was looking for. I appreciate your help. Not sure why you had to insert the rude comments in your responses, but I appreciate it anyway.  
> **username_2**: Yes you're right, @Jacob. There was no need for being rude, sorry!  
> **username_8**: What's the .id('not 1') for when grabbing the top level entries?  
> **username_2**: @veritascs I set this parameter to exclude the homepage from the navigation. It is an entry in my structure (with the id 1), but I don't want it to be output here. You can also exclude it by slug: `.slug('not home')` or exclude multiple entries: `.id('and', 'not 1', 'not 247', 'not 71')` ;)  

---

### Answer by username_4 on 2014-08-13. Score: 6

It sounds like you want utmost flexibility. So instead of trying to write any code for you, let me just describe all of the tools which should make this possible...

To begin, you definitely want a Structure section. Then your clients will have the complete control that you are looking for... adding, removing, and rearranging their entries (aka pages).
{% nav %}
This one is pretty obvious. Run the whole section through a nav tag like this:
{% nav entry in craft.entries.section('pages') %}

Within that loop, you can use some of these other tools...
{% ifchildren %}
Also pretty obvious. You'll need this to run sub-loops for all of your nested entries. Every time an entry contains sub-entries, this Twig tag will be triggered (no matter how deep it goes).
entry.hasDescendants()
Optional. If you want to check if an entry has any children without actually navigating down that branch, you can use this function. In fact, many of the EntryModel methods can be useful to you in various circumstances.
entry.level
This will tell you exactly what level you are on. So for example, "1" is the top level, "2" is their respective children, etc.
entry.type
If you're using various entry types (which you probably are), then this will help you sort out which type of entry you're dealing with at that exact moment.
Bonus: {% cache %}
You can wrap the whole nav in a cache tag to make it easier for the system to deal with in the future.

If you feel like I missed something, or that you still don't have the control that you want, just let me know what you're trying to accomplish. I can 99% guarantee that there is an existing Craft way of handling it.
Hope that helps!

> **Comments:**
> **username_2**: `{% nav entry in entries %}` makes sense if you want to make use of `{% children %}`. If you want more control over the html of nested items, I'd use basic for loops: `{% for entry in entries %}`.  
> **username_2**: I meant the self-nesting feature of the `{% children %}` tag.  
> **username_4**: @carlcs He specifies that his nav has children... It seems like a perfect fit to me.  
> **username_2**: Ok, I didn't know that you can use methods like `level` or `hasDescendants` within the `{% nav %}` tag. But that's great if you can! Always thought `{% nav %}` is something very special and that it is restricted to the simple use case shown in the docs. Thanks for the info, Lindsey!  
> **username_2**: Using `{% nav %}` in combination with `level` is probably the cleanest way to add further HTML to a navigation. Marion's solution is really clever, but it seems kind of hacky to "misuse" macros like this.  

---

### Answer by username_5 on 2014-08-12. Score: 4

I am a big fan of using a recursive macro when the `{% nav %}` tag is not enough. [This answer](https://craftcms.stackexchange.com/questions/1779/display-number-based-on-position-in-structure-hierarchy/1809#1809) has an example.


---

### Answer by username_6 on 2015-08-05. Score: 2

I've posted a recipe for dynamically-generated nav menus which encompasses a lot of logic to determine the active page/section/etc: [Fully Dynamic Hierarchical Nav Menu Template](https://craftcookbook.net/recipes/fully-dynamic-hierarchical-nav-menu-template)


---

### Answer by username_7 on 2015-08-06. Score: 0

IMO, this is a much more flexible soloution, albeit a plugin: <https://github.com/am-impact/amnav/>

I have used the methods above, but kept running into issues where a client's single exception to the navigation structure would cause a bunch of extra work. For example, they might want a single in the middle of a structure hierarchy or a channel entry as the child of a single, typical requests for clients.

Using a dedicated structure for the menus and another for the content only confuses clients and they end up messing things up in result.

Using the A&M nav plugin solved most of these issues. You can change the Menu label to whatever you want, and having a menu called 'Menus' is much easier for the client than searching through the entries for the 'menu structure' The only drawback to the plugin is that the menus must be added to the manually, however there is a handy Navigation field type to handle that.

Hope this helps.

> **Comments:**
> **username_2**: Why did you use two structures, one for the nav and one for the content / metadata. I think it's the whole advantage of that approach to hAve it all together in one structure. To "import" foreign entries from other sections an entry type with an entries field is all you need.  

---

