Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_boot.css, line 7713

5.4.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.

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>
Copy Code