<p>I guess it would be easier to use a for-loop instead of that nav-loop in your case. Although it's harder to get multi-level-dropdowns</p>

<pre><code>{% set categories = craft.categories.group('compositions') %}
&lt;div class="collapse navbar-collapse" id="workCategories"&gt;
  &lt;ul class="nav navbar-nav"&gt;
    {% for entry in categories %}
      {% if not entry.hasDescendants() %}
        &lt;li&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/li&gt;
      {% else %}
        &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;{{ entry.title }} &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu" role="menu"&gt;
            {% for child in entry.getDescendants() %}
              &lt;a href="{{ child.url }}"&gt;{{ child.title }}&lt;/a&gt;
            {% endfor %}
          &lt;/ul&gt;
        &lt;/li&gt;
      {% endif %}
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

CC BY-SA 3.0
2014-10-09T11:29:07.983Z
2014-10-09T11:29:07.983Z
maxx
<p>thanks all, this worked for me... not sure it's straight forward but it works...</p>

<pre><code>{% set categories = craft.categories.group('compositions') %}
&lt;nav class="navbar navbar-default" role="navigation"&gt;
&lt;div class="container"&gt;
&lt;div class="navbar-header"&gt;
  &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#workCategories"&gt;
    &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
    &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;span class="icon-bar"&gt;&lt;/span&gt;
  &lt;/button&gt;
&lt;/div&gt;
&lt;div class="collapse navbar-collapse" id="workCategories"&gt;
&lt;ul class="nav navbar-nav"&gt;
  {% for entry in categories %}
  {% if entry.level == 1 and entry.children|length %}
    &lt;li class="dropdown"&gt;
      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;{{ entry.title }} &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;ul class="dropdown-menu" role="menu"&gt;
        {% for child in entry.getDescendants() %}
          &lt;li&gt;&lt;a href="{{ child.url }}"&gt;{{ child.title }}&lt;/a&gt;&lt;/li&gt;
        {% endfor %}
      &lt;/ul&gt;
    &lt;/li&gt;
  {% elseif entry.level == 1 and not entry.hasDescendants() %}
    &lt;li&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/li&gt;
  {% endif %}
  {% endfor %}
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;
&lt;/nav&gt;
</code></pre>

CC BY-SA 3.0
2014-10-09T23:57:07.233Z
easier would be:  `{% set categories = craft.categories.group('compositions').level(1) %}` you wouldn't need the if level == 1 then
maxx
CC BY-SA 3.0
2014-10-09T15:14:05.020Z
2014-10-09T15:14:05.020Z
jjem
<p>I am trying to put my categories and their children into a Bootstrap navbar. If category has Children it should become a dropdown link.</p>

<p>Here is the code:</p>

<pre><code>{% set categories = craft.categories.group('compositions') %}
&lt;div class="collapse navbar-collapse" id="workCategories"&gt;
  &lt;ul class="nav navbar-nav"&gt;
   {% nav entry in categories %}
    &lt;li&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;
     {% ifchildren %}
      &lt;li class="dropdown"&gt;
       &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;{{ entry.title }} &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;ul class="dropdown-menu" role="menu"&gt;
       {% children %}
     &lt;/ul&gt;
&lt;/li&gt;
{% endifchildren %}
&lt;/li&gt;
    {% endnav %}
  &lt;/ul&gt;
</code></pre>

<p>It kind of work except that the top categories appear twice:</p>

<p>once with the dropdown and the children (which I want)
and once without the dropdown.</p>

<p>How could I nest those children without repeating them?</p>

CC BY-SA 3.0
2014-10-09T09:49:02.273Z
have you tried using {% else %} inside the if children ? 
The problem is, that if there are children you generate two <li>'s one without class="dropdown" and one with it
maxx
<navigation><category>
Categories children in Bootstrap navbar
# Categories children in Bootstrap navbar

(Asked by: username_0 on 2014-10-09)

I am trying to put my categories and their children into a Bootstrap navbar. If category has Children it should become a dropdown link.
Here is the code:
{% set categories = craft.categories.group('compositions') %}

  
   {% nav entry in categories %}
    {{ entry.title }}
     {% ifchildren %}
      
       {{ entry.title }} 
      
       {% children %}
     

{% endifchildren %}

    {% endnav %}
  

It kind of work except that the top categories appear twice:
once with the dropdown and the children (which I want)
and once without the dropdown.
How could I nest those children without repeating them?

**Tags:** navigation, category

> **Comments:**
> **username_1**: have you tried using {% else %} inside the if children ?  The problem is, that if there are children you generate two <li>'s one without class="dropdown" and one with it  

---

## 2 answers

### Answer by username_1 on 2014-10-09. Score: 2

I guess it would be easier to use a for-loop instead of that nav-loop in your case. Although it's harder to get multi-level-dropdowns
{% set categories = craft.categories.group('compositions') %}

  
    {% for entry in categories %}
      {% if not entry.hasDescendants() %}
        {{ entry.title }}
      {% else %}
        
          {{ entry.title }} 
          
            {% for child in entry.getDescendants() %}
              {{ child.title }}
            {% endfor %}
          
        
      {% endif %}


---

### Answer by username_0 on 2014-10-09. Score: 0

thanks all, this worked for me... not sure it's straight forward but it works...
{% set categories = craft.categories.group('compositions') %}



  
    Toggle navigation
    
    
    
  



  {% for entry in categories %}
  {% if entry.level == 1 and entry.children|length %}
    
      {{ entry.title }} 
      
        {% for child in entry.getDescendants() %}
          {{ child.title }}
        {% endfor %}
      
    
  {% elseif entry.level == 1 and not entry.hasDescendants() %}
    {{ entry.title }}
  {% endif %}
  {% endfor %}


<

> **Comments:**
> **username_1**: easier would be:  `{% set categories = craft.categories.group('compositions').level(1) %}` you wouldn't need the if level == 1 then  

---

