Nested Navbar menu not working in Bootstrap - css

Question

Ok! I am not using Primefaces/Omnifaces or Bootfaces, the requirement is to do it using Bootstrap only.
What I am trying to achieve is creating nested menu dynamically, I have been able to achieve only one level Menu.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">LAS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<ui:repeat value="#{menuViewModel.parentMenu}" var="parentMenuItem">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#{parentMenuItem.menuLabel}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<ui:repeat value="#{menuViewModel.generateChildMenu(parentMenuItem.menuName)}" var="childMenuItem">
<a class="dropdown-item" href="#">#{childMenuItem.menuLabel}</a>
</ui:repeat>
</div>
</li>
</ui:repeat>
</ul>
<button class="btn btn-outline-success my-2 my-sm-0 dropdown">
<span class="glyphicon glyphicon-user"></span> User
</button>
</div>
</nav>
Now, as there may be many number of children (though we have only 3 level of nested menu items yet) the problem starts. How I have to change my xhtml to generate nested menus.
The attached image shows first level of Menu.
As you can see, the menu item Host Configuration has another sub items but I am not able to understand how I can show it on my view.
Do I have to use recursive logic or something or there is a need to write some EL?
Thanks