0

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?

  • 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 Oct 9 '14 at 9:49
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>
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>
  • easier would be: {% set categories = craft.categories.group('compositions').level(1) %} you wouldn't need the if level == 1 then – maxx Oct 9 '14 at 23:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.