Dropdown child items in bootstrap

Kirby 2 Solved ✅
1

Hi all -

I’m using bootstrap to create my first Kirby site & template, and I’ve got my first nav working fine, but only at one level. I need to have a dropdown for child items, but every example I find online doesn’t work, or is for something slightly different.

So far my code is:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <?php foreach($pages->visible() as $item): ?>
        <li class="menu-item<?= r($item->isOpen(), ' is-active') ?>">
          <a href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
        </li>
        <?php endforeach ?>
      </ul>
    </div>
  </div>
</nav>

I really need the child items to appear as a separate ul within the parent li if there is a child page present.

Ideas appreciated!

2

Check if the page has children and if so, create the sublist:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <?php foreach($pages->visible() as $item): ?>
        <li class="menu-item<?= r($item->isOpen(), ' is-active') ?>">
          <a href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
            <?php if($item->hasChildren()): ?>
              <ul>
                <?php foreach($item->children() as $child): ?>
                  <li><?php echo $child->title() ?></li>
                <?php endforeach ?>
              </ul>
            <?php endif ?>
        </li>
        <?php endforeach ?>
      </ul>
    </div>
  </div>
</nav>
3

Thanks so much @texnixe, you are super helpful!

I’ve used your code, but there are some things that need tinkering for it to work with bootstrap out of the box (to take advantage of it’s nav options etc).

An example of this is below:

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-slide-dropdown">
        <ul class="nav navbar-nav">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        	<li class="dropdown">
			  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>				
			  <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>                
            </li>
        </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

So I’ve edited what you sent in an effort to assign a ‘dropdown’ class to the parent list element if indeed it is a parent, but no luck! Any ideas? Thanks so much!

My (unsuccessful) code:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <?php foreach($pages->visible() as $item): ?>
        <li class="menu-item<?= r($item->isOpen(), ' is-active')?>" <?php if($item->hasChildren()): ?> class="dropdown" <?php endif ?>>
          <a href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
            <?php if($item->hasChildren()): ?>
              <ul class="dropdown-menu" role="menu">
                <?php foreach($item->children() as $child): ?>
                  <li><?php echo $child->title() ?></li>
                <?php endforeach ?>
              </ul>
            <?php endif ?>
        </li>
        <?php endforeach ?>
      </ul>
    </div>
  </div>
</nav>
4

The obvious problem is that you are applying two class attributes in this line:

<li class="menu-item<?= r($item->isOpen(), ' is-active')?>" <?php if($item->hasChildren()): ?> class="dropdown" <?php endif ?>>

Instead it should be:

<li class="menu-item<?= r($item->isOpen(), ' is-active')?><?php e($item->hasChildren(), ' dropdown')?>">
5

Sonja, you babe! Thanks so much!