This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: JACC & Bootstrap

Arches:JACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/journal_boot.css, line 6505

4.2 Sidebar Nav

Description: Side bar for any 3 layer nav on the site. the parent node is from the main nav.

NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 
<nav class="nav-sub bg_primary c_white font_2 font_ui ">
    <ul class="ul_none flex_column flex">
        <li class="nav-item font-size_up" data-nav="parent">
            <div class="bg_black-4 ">
                <a class="text-shadow_black-1 block w_100 c_white p-y_2 p-x_4 w_100 h:c_white inline-block h:underline self_center">Parent Link: Tree starts from this node</a>
            </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="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>        <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 active" data-nav="child">
            <div class="flex flex_row">
                <div class="active 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 active 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 show">
                        <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>                    <li class="nav-item  active " data-nav="grandchild">
                                <div class="flex flex_row">
                                    <div class="active 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 active 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 collapse show childNavCollapse">
                                            <ul class="ul_none flex_column flex">
                                                <li class="nav-item  " data-nav="greatGrandChild">
                                                    <div class="flex flex_row">
                                                        <div class="flex_auto self_center">
                                                            <a class="  text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                                                        </div>
                                                    </div>
                                                </li>                                        <li class="nav-item  " data-nav="greatGrandChild">
                                                    <div class="flex flex_row">
                                                        <div class="flex_auto self_center">
                                                            <a class="  text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                                                        </div>
                                                    </div>
                                                </li>                                        <li class="nav-item active " data-nav="greatGrandChild">
                                                    <div class="flex flex_row">
                                                        <div class="flex_auto self_center">
                                                            <a class=" active text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                                                        </div>
                                                    </div>
                                                </li>                                        <li class="nav-item  " data-nav="greatGrandChild">
                                                    <div class="flex flex_row">
                                                        <div class="flex_auto self_center">
                                                            <a class="  text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                                                        </div>
                                                    </div>
                                                </li>                                    </ul>
                                        </nav>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </li>    </ul>
</nav>
Copy Code