Bootstrap 4 Navbar

Hey Guys.

I'm looking to modify the code from https://www.interactivetools.com/forum/forum-posts.php?postNum=2234657 to use bootstrap4 navbar.  Can you help?

Referring to https://getbootstrap.com/docs/4.0/components/navbar/ we can simply use

<?php foreach ($categories as $categoryRecord): ?>

<?php echo $categoryRecord['_listItemStart'] ?>

<a href="<?php echo $categoryRecord['_link'] ?>" class="nav-item nav-link"> <?php echo $categoryRecord['name'] ?> </a>

<?php echo $categoryRecord['_listItemEnd'] ?>

<?php endforeach; ?>

However, if that item has a child, we need to;

1. Add the dropdown class to the list item
2. Add the dropdown-toggle class  and the data-toggle to the link
3. Wrap the 2nd level items in a div: <div class="dropdown-menu">... </div>
4. Have all of the 2nd level items as <a class="dropdown-item" href="#">...</a>  

So the final output is something like

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Top Level</a></li>
<li class="nav-item"><a class="nav-link" href="#">Top Level</a></li>

<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Top Level with Child</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Second Level</a>
<a class="dropdown-item" href="#">Second Level</a>
<a class="dropdown-item" href="#">Second Level</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">Top Level</a></li>
<li class="nav-item"><a class="nav-link" href="#">Top Level</a></li>
</ul>

</div>