Source: dist/css/library_boot.css, line 6437
5.6.4 Child NavItem With Children
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
Example
Default styling
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="collapsed br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse" >
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>