Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-09T11:29:07.983Z
Answers.LastActivityDate: 2014-10-09T11:29:07.983Z
Answers.UserDisplayName: maxx
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-09T23:57:07.233Z
Answers.Text: easier would be:  `{% set categories = craft.categories.group('compositions').level(1) %}` you wouldn't need the if level == 1 then
Answers.UserDisplayName: maxx
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-09T15:14:05.020Z
Answers.LastActivityDate: 2014-10-09T15:14:05.020Z
Answers.UserDisplayName: jjem
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-10-09T09:49:02.273Z
Comments.Text: 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
Comments.UserDisplayName: maxx
Tags: <navigation><category>
Title: Categories children in Bootstrap navbar
ThreadText: # 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') %}
  <div class="collapse navbar-collapse" id="workCategories">
    <ul class="nav navbar-nav">
     {% nav entry in categories %}
      <li><a href="{{ entry.url }}">{{ entry.title }}</a>
       {% ifchildren %}
        <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ entry.title }} <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
         {% children %}
       </ul>
  </li>
  {% endifchildren %}
  </li>
      {% endnav %}
    </ul>
  
  ```
  
  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') %}
  <div class="collapse navbar-collapse" id="workCategories">
    <ul class="nav navbar-nav">
      {% for entry in categories %}
        {% if not entry.hasDescendants() %}
          <li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
        {% else %}
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ entry.title }} <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              {% for child in entry.getDescendants() %}
                <a href="{{ child.url }}">{{ child.title }}</a>
              {% endfor %}
            </ul>
          </li>
        {% endif %}
    </ul>
  </div>
  
  ```
  
  
  ---
  
  ### 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') %}
  <nav class="navbar navbar-default" role="navigation">
  <div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#workCategories">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse" id="workCategories">
  <ul class="nav navbar-nav">
    {% for entry in categories %}
    {% if entry.level == 1 and entry.children|length %}
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ entry.title }} <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          {% for child in entry.getDescendants() %}
            <li><a href="{{ child.url }}">{{ child.title }}</a></li>
          {% endfor %}
        </ul>
      </li>
    {% elseif entry.level == 1 and not entry.hasDescendants() %}
      <li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
    {% endif %}
    {% endfor %}
  </ul>
  </div>
  </div><
  </nav>
  
  ```
  
  > **Comments:**
  > **username_1**: easier would be:  `{% set categories = craft.categories.group('compositions').level(1) %}` you wouldn't need the if level == 1 then  
  
  ---
  
  