Source: dist/css/acc_boot.css, line 13936
5.1 Header Nav
The Header Nav of ACC.org. This is sample data and might not reflect the full design or content needed in production.
Example
Default styling
<div class="flex c_white relative">
<nav class="flex_auto navbar navbar-primary p_0 navbar-expand-lg navbar-dark bg_acc font_2 font_1:lg relative">
<div class="relative"><button class="br_solid br_2 br_white-2 collapsed m-l_3 m-y_3 navbar-toggler p_2 expanded-click-area collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navBarMainNav" aria-controls="navBarMainNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="icon-toggle_bars-times fas fa a:c_acc-2 c_white"></i><span class="a:c_acc-2 c_white p-x_3 uppercase font_accent">Menu</span>
</button>
</div> <div class="collapse navbar-collapse" id="navBarMainNav">
<ul class="navbar-nav flex flex_row:lg flex_column justify_around w_100">
<li class="nav-item relative text_left text_center:lg flex_shrink">
<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="//www.acc.org/" title="Home of the American College of Cardiology"><i class="fas fa-home p-x_3:lg"></i><span class="display_none:lg"> Home</span></a>
</li>
<li class="display_none:lg relative nav-item relative text_left text_center:lg flex_auto">
<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="//www.acc.org/guidelines#doctype=Guidelines" title="Access ACC guidelines and clinical policy documents as well as related resources">Guidelines</a>
</li>
<li class="nav-item relative text_left text_center:lg flex_auto dropdown [ active ]">
<a class="nav-link nowrap p-l_4 p-l_0:lg dropdown-toggle [a:c_white] display_none:lg inline-block"
id="clinicalTopicsDropdown"
role="button"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"><i
class="far fa icon-toggle_plus-minus m-l_n2 m-r_2 "></i></a>
<a class="nav-link nowrap p-l_0 [a:c_white] inline-block"
href="/clinical-topics">Clinical
Topics</a>
<div class="dropdown-menu font_copy br-t_0 br_none br_solid:lg br_square m-t_0 m-t_2:lg" aria-labelledby="clinicalTopicsDropdown">
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="p-x_2 p-y_0 p-y_2:md order_2 order_1:md dropdown_column w_50:md">
<ul class="ul_none lh_2">
<li class="relative m-x_2:md m-x_3">
<a
href="http://cvquality.acc.org/?_ga=2.33577825.159963902.1562853382-843642371.1562007133"
target="_blank"
class="transition_1 h:opacity opacity_8"
><img
src="https://www.acc.org/~/media/Non-Clinical/Images/External%20Site%20Logos/ACC_QII_logo.png"
alt="QII" class="w_100 max-w_20"
/></a>
</li>
<li class="relative m-x_2:md m-x_3">
<a href="http://cvquality.acc.org/NCDR-Home.aspx?_ga=2.91395290.159963902.1562853382-843642371.1562007133" target="_blank" class="transition_1 h:opacity opacity_8"><img src="https://www.acc.org/~/media/Non-Clinical/Images/External Site Logos/ACC_NCDR_logo.png" alt="NCDR" class="w_100 max-w_20"></a>
</li>
</ul> </div>
<div
class="p-x_2 p-y_0 p-y_2:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md order_1 order_2:md dropdown_column w_50:md"
>
<ul class="ul_none lh_2"
id="SubLinkCollapseParent">
<li class="m-b_2">
<a class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes"><span
class="text-indent_n1 inline-block m-l_4">Acute
Coronary Syndromes</span></span></a>
</li>
<li class="m-b_2">
<a class="dropdown-item link transition_4 wrap"
href="/clinical-topics/anticoagulation-management"
title="Anticoagulation Management"><span
class="text-indent_n1 inline-block m-l_4">Anticoagulation
Management</span></a>
</li>
<li class="m-b_2">
<div
class="flex justify_start transition_4 dropdown-item link">
<button class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
data-bs-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="learningCollapse"
data-bs-target="#learningCollapse"
onclick="event.stopPropagation()">
<i
class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
</button>
<a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
href="#">Online Learning Catalog</a>
</div>
<ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
id="learningCollapse">
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/earncredit"><span
class="text-indent_n1 inline-block m-l_5">Earn
Credit</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/board-prep-offerings"
title="Board Prep Offerings"><span
class="text-indent_n1 inline-block m-l_5">Board
Prep Offerings</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/education-catalog"><span
class="text-indent_n1 inline-block m-l_5">View
the Entire Catalog</span></a>
</li>
</ul>
</li>
<li class="m-b_2">
<div
class="flex justify_start transition_4 dropdown-item link">
<a class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
data-bs-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="productsCollapse"
data-bs-target="#productsCollapse"
onclick="event.stopPropagation()">
<i
class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
</a>
<a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
href="/education-and-meetings/education-catalog">Products</a>
</div>
<ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
id="productsCollapse">
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/accsap"><span
class="text-indent_n1 inline-block m-l_5">ACCSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/accel-audio"><span
class="text-indent_n1 inline-block m-l_5">ACCEL</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/cardiosource-plus"><span
class="text-indent_n1 inline-block m-l_5">CardioSource
Plus for Institutions and
Practices</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/cathsap"><span
class="text-indent_n1 inline-block m-l_5">CathSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/ecg-drill-and-practice"
title="ECG Drill and Practice"><span
class="text-indent_n1 inline-block m-l_5">ECG
Drill and Practice</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/echosap"><span
class="text-indent_n1 inline-block m-l_5">EchoSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/epsap"><span
class="text-indent_n1 inline-block m-l_5">EP
SAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/heart-songs-5"><span
class="text-indent_n1 inline-block m-l_5">Heart
Songs</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/iscience"><span
class="text-indent_n1 inline-block m-l_5">iScience</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod"><span
class="text-indent_n1 inline-block m-l_5">Nuclear
Cardiology and Cardiac CT Meeting on
Demand</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure"><span
class="text-indent_n1 inline-block m-l_5">RightSTEPS
Optimizing Medical Therapy for
Chronic Heart
Failure</span></a>
</li>
</ul>
</li>
</ul> </div>
</div> </div>
</li>
<li class="nav-item relative text_left text_center:lg flex_auto ">
<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="#">Latest In Cardiology</a>
</li>
<li class="nav-item relative text_left text_center:lg flex_auto dropdown ">
<a class="nav-link nowrap p-l_4 p-l_0:lg dropdown-toggle [a:c_white] display_none:lg inline-block"
id="eduDropdown"
role="button"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"><i
class="far fa icon-toggle_plus-minus m-l_n2 m-r_2 "></i>
</a>
<a class="nav-link nowrap p-l_0 [a:c_white] inline-block"
href="/Edu-Edu">Education and Meetings</a>
<div class="dropdown-menu font_copy br-t_0 dropdown-menu-end br_none br_solid:lg br_square m-t_0 m-t_2:lg" aria-labelledby="eduDropdown">
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="p-x_2 p-y_0 p-y_2:md dropdown_column">
<ul class="ul_none lh_2 m_0 max-w_25 w_100">
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes.pdf"
><span class="text-indent_n1 inline-block m-l_4">Acute Coronary Syndromes</span></span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/anticoagulation-management"
title="Anticoagulation Management"
target="_blank"
><span class="text-indent_n1 inline-block m-l_4">Anticoagulation Management</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/arrhythmias-and-clinical-ep"
><span class="text-indent_n1 inline-block m-l_4">Arrhythmias and Clinical EP</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes/atherosclerotic-disease-cad-pad"
><span class="text-indent_n1 inline-block m-l_4">Atherosclerotic Disease (CAD/PAD)</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/cardiac-surgery"
><span class="text-indent_n1 inline-block m-l_4">Cardiac Surgery</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/cardio-oncology"
><span class="text-indent_n1 inline-block m-l_4">Cardio-Oncology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/congenital-heart-disease-pediatric-cardiology"
><span class="text-indent_n1 inline-block m-l_4">Congenital Heart Disease and Pediatric Cardiology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/diabetes-and-cardiometabolic-disease.zip"
><span class="text-indent_n1 inline-block m-l_4">Diabetes and Cardiometabolic Disease</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/dyslipidemia"
title="Dyslipidemia"
><span class="text-indent_n1 inline-block m-l_4">Dyslipidemia</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/geriatric-cardiology"
><span class="text-indent_n1 inline-block m-l_4">Geriatric Cardiology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/heart-failure-and-cardiomyopathies"
title="Heart Failure and Cardiomyopathies"
><span class="text-indent_n1 inline-block m-l_4">Heart Failure and Cardiomyopathies</span></a
>
</li>
</ul> </div>
</div> </div>
</li>
<li class="nav-item relative text_left text_center:lg flex_auto dropdown ">
<a class="nav-link nowrap p-l_4 p-l_0:lg dropdown-toggle [a:c_white] display_none:lg inline-block"
id="toolDropdown"
role="button"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"><i
class="far fa icon-toggle_plus-minus m-l_n2 m-r_2 "></i>
</a>
<a class="nav-link nowrap p-l_0 [a:c_white] inline-block"
href="/Edu-Edu">Tools & Practice Support</a>
<div class="dropdown-menu font_copy br-t_0 dropdown-menu-end br_none br_solid:lg br_square m-t_0 m-t_2:lg" aria-labelledby="toolDropdown">
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="p-x_2 p-y_0 p-y_2:md dropdown_column w_50:md">
<ul class="ul_none lh_2 m_0 max-w_25 w_100">
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes.pdf"
><span class="text-indent_n1 inline-block m-l_4">Acute Coronary Syndromes</span></span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/anticoagulation-management"
title="Anticoagulation Management"
target="_blank"
><span class="text-indent_n1 inline-block m-l_4">Anticoagulation Management</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/arrhythmias-and-clinical-ep"
><span class="text-indent_n1 inline-block m-l_4">Arrhythmias and Clinical EP</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes/atherosclerotic-disease-cad-pad"
><span class="text-indent_n1 inline-block m-l_4">Atherosclerotic Disease (CAD/PAD)</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/cardiac-surgery"
><span class="text-indent_n1 inline-block m-l_4">Cardiac Surgery</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/cardio-oncology"
><span class="text-indent_n1 inline-block m-l_4">Cardio-Oncology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/congenital-heart-disease-pediatric-cardiology"
><span class="text-indent_n1 inline-block m-l_4">Congenital Heart Disease and Pediatric Cardiology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/diabetes-and-cardiometabolic-disease.zip"
><span class="text-indent_n1 inline-block m-l_4">Diabetes and Cardiometabolic Disease</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/dyslipidemia"
title="Dyslipidemia"
><span class="text-indent_n1 inline-block m-l_4">Dyslipidemia</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/geriatric-cardiology"
><span class="text-indent_n1 inline-block m-l_4">Geriatric Cardiology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/heart-failure-and-cardiomyopathies"
title="Heart Failure and Cardiomyopathies"
><span class="text-indent_n1 inline-block m-l_4">Heart Failure and Cardiomyopathies</span></a
>
</li>
</ul> </div>
<div
class="p-x_2 p-y_0 p-y_2:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md dropdown_column w_50:md"
>
<ul class="ul_none lh_2"
id="SubLinkCollapseParent">
<li class="m-b_2">
<a class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes"><span
class="text-indent_n1 inline-block m-l_4">Acute
Coronary Syndromes</span></span></a>
</li>
<li class="m-b_2">
<a class="dropdown-item link transition_4 wrap"
href="/clinical-topics/anticoagulation-management"
title="Anticoagulation Management"><span
class="text-indent_n1 inline-block m-l_4">Anticoagulation
Management</span></a>
</li>
<li class="m-b_2">
<div
class="flex justify_start transition_4 dropdown-item link">
<button class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
data-bs-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="learningCollapse"
data-bs-target="#learningCollapse"
onclick="event.stopPropagation()">
<i
class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
</button>
<a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
href="#">Online Learning Catalog</a>
</div>
<ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
id="learningCollapse">
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/earncredit"><span
class="text-indent_n1 inline-block m-l_5">Earn
Credit</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/board-prep-offerings"
title="Board Prep Offerings"><span
class="text-indent_n1 inline-block m-l_5">Board
Prep Offerings</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/education-catalog"><span
class="text-indent_n1 inline-block m-l_5">View
the Entire Catalog</span></a>
</li>
</ul>
</li>
<li class="m-b_2">
<div
class="flex justify_start transition_4 dropdown-item link">
<a class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
data-bs-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="productsCollapse"
data-bs-target="#productsCollapse"
onclick="event.stopPropagation()">
<i
class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
</a>
<a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
href="/education-and-meetings/education-catalog">Products</a>
</div>
<ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
id="productsCollapse">
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/accsap"><span
class="text-indent_n1 inline-block m-l_5">ACCSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/accel-audio"><span
class="text-indent_n1 inline-block m-l_5">ACCEL</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/cardiosource-plus"><span
class="text-indent_n1 inline-block m-l_5">CardioSource
Plus for Institutions and
Practices</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/cathsap"><span
class="text-indent_n1 inline-block m-l_5">CathSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/ecg-drill-and-practice"
title="ECG Drill and Practice"><span
class="text-indent_n1 inline-block m-l_5">ECG
Drill and Practice</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/echosap"><span
class="text-indent_n1 inline-block m-l_5">EchoSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/epsap"><span
class="text-indent_n1 inline-block m-l_5">EP
SAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/heart-songs-5"><span
class="text-indent_n1 inline-block m-l_5">Heart
Songs</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/iscience"><span
class="text-indent_n1 inline-block m-l_5">iScience</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod"><span
class="text-indent_n1 inline-block m-l_5">Nuclear
Cardiology and Cardiac CT Meeting on
Demand</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure"><span
class="text-indent_n1 inline-block m-l_5">RightSTEPS
Optimizing Medical Therapy for
Chronic Heart
Failure</span></a>
</li>
</ul>
</li>
</ul> </div>
</div> </div>
</li>
<li class="display_none:lg nav-item relative text_left text_center:lg flex_auto ">
<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="//www.acc.org/membership" title="Access exclusive member features and groups or learn about ACC membership">Membership</a>
</li>
<li class="display_none:lg nav-item relative text_left text_center:lg flex_auto ">
<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="//www.acc.org/about-acc" title="Learn about the ACC organization">About ACC</a>
</li>
<li class="display_none:lg nav-item relative text_left text_center:lg flex_auto ">
<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="http://www.onlinejacc.org/" target="_blank" title="JACC.org">JACC</a>
</li>
<li class="display_none:lg nav-item relative text_left text_center:lg flex_auto ">
<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="http://accscientificsession.acc.org" target="_blank" title="ACC Annual Scientific Session Website">ACC.19</a>
</li>
</ul>
</div>
</nav>
<nav class="font_1 absolute bg_primary br-t_1 br_primary br_solid br_none flex_shrink font_0 font_0:lg m-l_auto navbar navbar-dark navbar-expand p-y_2 r_0 t_0 b_0:lg relative:lg" >
<ul class="navbar-nav">
<li class="nav-item relative flex_shrink dropdown">
<a class="nav-link expanded-click-area [a:c_white] h:c_white nowrap"
role="button"
id="dropdownMyACC"
data-bs-toggle="dropdown"
aria-expanded="false"
>My ACC <i class="far icon-toggle_chevron-up-down"></i></a>
<div
class="dropdown-menu font_copy br-t_0 dropdown-menu-end br_none br_solid:lg m-t_0 m-t_2:lg font_0" aria-labelledby="dropdownMyACC"
>
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="p-x_2 p-y_0 dropdown_column">
<ul class="ul_none lh_2 m_0">
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-profile">My Profile</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-training-program">My Training Programs</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-membership">My Membership</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-library">My Library</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="http://edu.acc.org/diweb/dashboard">My Learning Dashboard</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="http://edu.acc.org/diweb/grades">My Transcript</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/ncdr-physician-dashboard">NCDR Physician Dashboard</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-communication-preferences">My Communication Preferences</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="https://memberhub.acc.org/">ACC Member Hub</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-purchase-history">My Purchases</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/personalization">Personalize ACC.org</a>
</li>
<div class="dropdown-divider m-y_3"></div>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/RemoteLogOff"> Logout</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class=" nav-link nowrap" href="#"><i class="far fa-shopping-cart"></i></a>
</li>
<!--<li class="nav-item">
<a class=" nav-link nowrap" href="#"><i class="fas fa-sign-out-alt"></i></a>
</li>-->
<!--<li class="nav-item">
<a href="@loginlink" class="nav-link nowrap"><i class="fas fa-sign-in-alt"></i> Log in to MyACC </a>
</li>-->
</ul>
</nav></div>Code Sample
Source: dist/css/acc_boot.css, line 14028
5.1.1 Mobile Menu Nav (Hamburger)
Description: A button that triggers the menu to show or hide with the site.
Example
Default styling
<div class="relative"><button class="br_solid br_2 br_white-2 collapsed m-l_3 m-y_3 navbar-toggler p_2 expanded-click-area collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navBarMainNav" aria-controls="navBarMainNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="icon-toggle_bars-times fas fa a:c_acc-2 c_white"></i><span class="a:c_acc-2 c_white p-x_3 uppercase font_accent">Menu</span>
</button>
</div>Code Sample
Source: dist/css/acc_boot.css, line 14130
5.1.2 JavaScript: Snippet to Show on Hover
Description:
Example
Default styling
<script>
document.addEventListener("DOMContentLoaded", function(){
// make it as accordion for smaller screens
if (window.innerWidth > 992) {
document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){
everyitem.addEventListener('mouseover', function(e){
let el_link = this.querySelector('a[data-bs-toggle]');
if(el_link != null){
let nextEl = this.querySelector('.dropdown-menu');
el_link.classList.add('show');
nextEl.classList.add('show');
nextEl.setAttribute("data-bs-popper", "none")
}
});
everyitem.addEventListener('mouseleave', function(e){
let el_link = this.querySelector('a[data-bs-toggle]');
if(el_link != null){
let nextEl = this.querySelector('.dropdown-menu');
el_link.classList.remove('show');
nextEl.classList.remove('show');
nextEl.removeAttribute('data-bs-popper');
}
})
});
}
// end if innerWidth
});
</script>Code Sample
Source: dist/css/acc_boot.css, line 14170
5.1.3 Responsive Top Nav with Single Layer Nav
The Header Nav with no dropdown navs but with elements that show up only in the mobile viewport
Example
Default styling
<nav class="navbar navbar-primary p_0 navbar-expand-lg navbar-dark bg_acc font_1">
<div class="relative"><button class="br_solid br_2 br_white-2 collapsed m-l_3 m-y_3 navbar-toggler p_2 expanded-click-area collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navBarMainNav" aria-controls="navBarMainNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="icon-toggle_bars-times fas fa a:c_acc-2 c_white"></i><span class="a:c_acc-2 c_white p-x_3 uppercase font_accent">Menu</span>
</button>
</div> <div class="collapse navbar-collapse" id="navBarMainNav">
<ul class="navbar-nav">
<li class="display_none:lg nav-item">
<a class="nav-link" href="//www.acc.org/" title="Home of the American College of Cardiology<span class="text-indent_n1 inline-block m-l_4"><i class="fas fa-home"></i><span class="display_none:lg"> Home</span></a
>
</li>
<li class="display_none:lg nav-item">
<a
class="nav-link" href="//www.acc.org/guidelines#doctype=Guidelines" title="Access ACC guidelines and clinical policy documents as well as related resources" >Guidelines</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="/clinical-topics" >Clinical Topics</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Latest In Cardiology</a>
</li>
<li class="display_none:lg nav-item">
<a
class="nav-link"
href="//www.acc.org/membership"
title="Access exclusive member features and groups or learn about ACC membership"
>Membership</a
>
</li>
<li class="display_none:lg nav-item">
<a class="nav-link" href="//www.acc.org/about-acc" title="Learn about the ACC organization"
>About ACC</a
>
</li>
<li class="display_none:lg nav-item">
<a class="nav-link" href="http://www.onlinejacc.org/" target="_blank" title="JACC.org">JACC <i class="c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2" style="text-indent: 0;"></i></a>
</li>
<li class="display_none:lg nav-item">
<a
class="nav-link"
href="http://accscientificsession.acc.org"
target="_blank"
title="ACC Annual Scientific Session Website"
>ACC.19 <i class="c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2" style="text-indent: 0;"></i></a
>
</li>
</ul>
</div>
</nav>Code Sample
Source: dist/css/acc_boot.css, line 14259
5.1.4 Dropdown Single Column
The Header Nav of ACC.org
Example
Default styling
- Acute Coronary Syndromes
- Anticoagulation Management
- Arrhythmias and Clinical EP
- Atherosclerotic Disease (CAD/PAD)
- Cardiac Surgery
- Cardio-Oncology
- Congenital Heart Disease and Pediatric Cardiology
- Diabetes and Cardiometabolic Disease
- Dyslipidemia
- Geriatric Cardiology
- Heart Failure and Cardiomyopathies
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="p-x_2 p-y_0 p-y_2:md dropdown_column">
<ul class="ul_none lh_2 m_0 max-w_25 w_100">
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes.pdf"
><span class="text-indent_n1 inline-block m-l_4">Acute Coronary Syndromes</span></span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/anticoagulation-management"
title="Anticoagulation Management"
target="_blank"
><span class="text-indent_n1 inline-block m-l_4">Anticoagulation Management</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/arrhythmias-and-clinical-ep"
><span class="text-indent_n1 inline-block m-l_4">Arrhythmias and Clinical EP</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes/atherosclerotic-disease-cad-pad"
><span class="text-indent_n1 inline-block m-l_4">Atherosclerotic Disease (CAD/PAD)</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/cardiac-surgery"
><span class="text-indent_n1 inline-block m-l_4">Cardiac Surgery</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/cardio-oncology"
><span class="text-indent_n1 inline-block m-l_4">Cardio-Oncology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/congenital-heart-disease-pediatric-cardiology"
><span class="text-indent_n1 inline-block m-l_4">Congenital Heart Disease and Pediatric Cardiology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/diabetes-and-cardiometabolic-disease.zip"
><span class="text-indent_n1 inline-block m-l_4">Diabetes and Cardiometabolic Disease</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/dyslipidemia"
title="Dyslipidemia"
><span class="text-indent_n1 inline-block m-l_4">Dyslipidemia</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/geriatric-cardiology"
><span class="text-indent_n1 inline-block m-l_4">Geriatric Cardiology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/heart-failure-and-cardiomyopathies"
title="Heart Failure and Cardiomyopathies"
><span class="text-indent_n1 inline-block m-l_4">Heart Failure and Cardiomyopathies</span></a
>
</li>
</ul> </div>
</div>Code Sample
5.1.4.1 Navigation.BrandedNav.Dropdown.List
Source: dist/css/acc_boot.css, line 14578
5.1.4.1.1 Dropdown Nav List with Alt Content
Description: Some columns take images instead of text in dropdown links
Example
Default styling
<ul class="ul_none lh_2">
<li class="relative m-x_2:md m-x_3">
<a
href="http://cvquality.acc.org/?_ga=2.33577825.159963902.1562853382-843642371.1562007133"
target="_blank"
class="transition_1 h:opacity opacity_8"
><img
src="https://www.acc.org/~/media/Non-Clinical/Images/External%20Site%20Logos/ACC_QII_logo.png"
alt="QII" class="w_100 max-w_20"
/></a>
</li>
<li class="relative m-x_2:md m-x_3">
<a href="http://cvquality.acc.org/NCDR-Home.aspx?_ga=2.91395290.159963902.1562853382-843642371.1562007133" target="_blank" class="transition_1 h:opacity opacity_8"><img src="https://www.acc.org/~/media/Non-Clinical/Images/External Site Logos/ACC_NCDR_logo.png" alt="NCDR" class="w_100 max-w_20"></a>
</li>
</ul>Code Sample
Source: dist/css/acc_boot.css, line 14326
5.1.4.1.2 Dropdown Nav List
Description: Simple single layer of links in a drop down
Example
Default styling
- Acute Coronary Syndromes
- Anticoagulation Management
- Arrhythmias and Clinical EP
- Atherosclerotic Disease (CAD/PAD)
- Cardiac Surgery
- Cardio-Oncology
- Congenital Heart Disease and Pediatric Cardiology
- Diabetes and Cardiometabolic Disease
- Dyslipidemia
- Geriatric Cardiology
- Heart Failure and Cardiomyopathies
<ul class="ul_none lh_2 m_0 max-w_25 w_100">
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes.pdf"
><span class="text-indent_n1 inline-block m-l_4">Acute Coronary Syndromes</span></span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/anticoagulation-management"
title="Anticoagulation Management"
target="_blank"
><span class="text-indent_n1 inline-block m-l_4">Anticoagulation Management</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/arrhythmias-and-clinical-ep"
><span class="text-indent_n1 inline-block m-l_4">Arrhythmias and Clinical EP</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes/atherosclerotic-disease-cad-pad"
><span class="text-indent_n1 inline-block m-l_4">Atherosclerotic Disease (CAD/PAD)</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/cardiac-surgery"
><span class="text-indent_n1 inline-block m-l_4">Cardiac Surgery</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/cardio-oncology"
><span class="text-indent_n1 inline-block m-l_4">Cardio-Oncology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/congenital-heart-disease-pediatric-cardiology"
><span class="text-indent_n1 inline-block m-l_4">Congenital Heart Disease and Pediatric Cardiology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/diabetes-and-cardiometabolic-disease.zip"
><span class="text-indent_n1 inline-block m-l_4">Diabetes and Cardiometabolic Disease</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/dyslipidemia"
title="Dyslipidemia"
><span class="text-indent_n1 inline-block m-l_4">Dyslipidemia</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/geriatric-cardiology"
><span class="text-indent_n1 inline-block m-l_4">Geriatric Cardiology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/heart-failure-and-cardiomyopathies"
title="Heart Failure and Cardiomyopathies"
><span class="text-indent_n1 inline-block m-l_4">Heart Failure and Cardiomyopathies</span></a
>
</li>
</ul>Code Sample
Source: dist/css/acc_boot.css, line 14421
5.1.4.1.3 Dropdown Nav List with Sub Links
Description: Simple single layer of links in a drop down
Example
Default styling
<ul class="ul_none lh_2"
id="SubLinkCollapseParent">
<li class="m-b_2">
<a class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes"><span
class="text-indent_n1 inline-block m-l_4">Acute
Coronary Syndromes</span></span></a>
</li>
<li class="m-b_2">
<a class="dropdown-item link transition_4 wrap"
href="/clinical-topics/anticoagulation-management"
title="Anticoagulation Management"><span
class="text-indent_n1 inline-block m-l_4">Anticoagulation
Management</span></a>
</li>
<li class="m-b_2">
<div
class="flex justify_start transition_4 dropdown-item link">
<button class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
data-bs-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="learningCollapse"
data-bs-target="#learningCollapse"
onclick="event.stopPropagation()">
<i
class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
</button>
<a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
href="#">Online Learning Catalog</a>
</div>
<ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
id="learningCollapse">
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/earncredit"><span
class="text-indent_n1 inline-block m-l_5">Earn
Credit</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/board-prep-offerings"
title="Board Prep Offerings"><span
class="text-indent_n1 inline-block m-l_5">Board
Prep Offerings</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/education-catalog"><span
class="text-indent_n1 inline-block m-l_5">View
the Entire Catalog</span></a>
</li>
</ul>
</li>
<li class="m-b_2">
<div
class="flex justify_start transition_4 dropdown-item link">
<a class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
data-bs-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="productsCollapse"
data-bs-target="#productsCollapse"
onclick="event.stopPropagation()">
<i
class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
</a>
<a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
href="/education-and-meetings/education-catalog">Products</a>
</div>
<ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
id="productsCollapse">
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/accsap"><span
class="text-indent_n1 inline-block m-l_5">ACCSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/accel-audio"><span
class="text-indent_n1 inline-block m-l_5">ACCEL</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/cardiosource-plus"><span
class="text-indent_n1 inline-block m-l_5">CardioSource
Plus for Institutions and
Practices</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/cathsap"><span
class="text-indent_n1 inline-block m-l_5">CathSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/ecg-drill-and-practice"
title="ECG Drill and Practice"><span
class="text-indent_n1 inline-block m-l_5">ECG
Drill and Practice</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/echosap"><span
class="text-indent_n1 inline-block m-l_5">EchoSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/epsap"><span
class="text-indent_n1 inline-block m-l_5">EP
SAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/heart-songs-5"><span
class="text-indent_n1 inline-block m-l_5">Heart
Songs</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/iscience"><span
class="text-indent_n1 inline-block m-l_5">iScience</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod"><span
class="text-indent_n1 inline-block m-l_5">Nuclear
Cardiology and Cardiac CT Meeting on
Demand</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure"><span
class="text-indent_n1 inline-block m-l_5">RightSTEPS
Optimizing Medical Therapy for
Chronic Heart
Failure</span></a>
</li>
</ul>
</li>
</ul>Code Sample
Source: dist/css/acc_boot.css, line 14280
5.1.4.2 Dropdown with Sub Links
The Header Nav of ACC.org
Example
Default styling
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="p-x_2 p-y_0 p-y_3:md dropdown_column">
<ul class="ul_none lh_2"
id="SubLinkCollapseParent">
<li class="m-b_2">
<a class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes"><span
class="text-indent_n1 inline-block m-l_4">Acute
Coronary Syndromes</span></span></a>
</li>
<li class="m-b_2">
<a class="dropdown-item link transition_4 wrap"
href="/clinical-topics/anticoagulation-management"
title="Anticoagulation Management"><span
class="text-indent_n1 inline-block m-l_4">Anticoagulation
Management</span></a>
</li>
<li class="m-b_2">
<div
class="flex justify_start transition_4 dropdown-item link">
<button class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
data-bs-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="learningCollapse"
data-bs-target="#learningCollapse"
onclick="event.stopPropagation()">
<i
class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
</button>
<a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
href="#">Online Learning Catalog</a>
</div>
<ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
id="learningCollapse">
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/earncredit"><span
class="text-indent_n1 inline-block m-l_5">Earn
Credit</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/board-prep-offerings"
title="Board Prep Offerings"><span
class="text-indent_n1 inline-block m-l_5">Board
Prep Offerings</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/education-catalog"><span
class="text-indent_n1 inline-block m-l_5">View
the Entire Catalog</span></a>
</li>
</ul>
</li>
<li class="m-b_2">
<div
class="flex justify_start transition_4 dropdown-item link">
<a class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
data-bs-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="productsCollapse"
data-bs-target="#productsCollapse"
onclick="event.stopPropagation()">
<i
class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
</a>
<a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
href="/education-and-meetings/education-catalog">Products</a>
</div>
<ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
id="productsCollapse">
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/accsap"><span
class="text-indent_n1 inline-block m-l_5">ACCSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/accel-audio"><span
class="text-indent_n1 inline-block m-l_5">ACCEL</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/cardiosource-plus"><span
class="text-indent_n1 inline-block m-l_5">CardioSource
Plus for Institutions and
Practices</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/cathsap"><span
class="text-indent_n1 inline-block m-l_5">CathSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/ecg-drill-and-practice"
title="ECG Drill and Practice"><span
class="text-indent_n1 inline-block m-l_5">ECG
Drill and Practice</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/echosap"><span
class="text-indent_n1 inline-block m-l_5">EchoSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/epsap"><span
class="text-indent_n1 inline-block m-l_5">EP
SAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/heart-songs-5"><span
class="text-indent_n1 inline-block m-l_5">Heart
Songs</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/iscience"><span
class="text-indent_n1 inline-block m-l_5">iScience</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod"><span
class="text-indent_n1 inline-block m-l_5">Nuclear
Cardiology and Cardiac CT Meeting on
Demand</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure"><span
class="text-indent_n1 inline-block m-l_5">RightSTEPS
Optimizing Medical Therapy for
Chronic Heart
Failure</span></a>
</li>
</ul>
</li>
</ul> </div>
</div>Code Sample
Source: dist/css/acc_boot.css, line 14233
5.1.4.3 Dropdown Double Column
The Header Nav of ACC.org
Example
Default styling
- Acute Coronary Syndromes
- Anticoagulation Management
- Arrhythmias and Clinical EP
- Atherosclerotic Disease (CAD/PAD)
- Cardiac Surgery
- Cardio-Oncology
- Congenital Heart Disease and Pediatric Cardiology
- Diabetes and Cardiometabolic Disease
- Dyslipidemia
- Geriatric Cardiology
- Heart Failure and Cardiomyopathies
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="p-x_2 p-y_0 p-y_2:md dropdown_column w_50:md">
<ul class="ul_none lh_2 m_0 max-w_25 w_100">
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes.pdf"
><span class="text-indent_n1 inline-block m-l_4">Acute Coronary Syndromes</span></span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/anticoagulation-management"
title="Anticoagulation Management"
target="_blank"
><span class="text-indent_n1 inline-block m-l_4">Anticoagulation Management</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/arrhythmias-and-clinical-ep"
><span class="text-indent_n1 inline-block m-l_4">Arrhythmias and Clinical EP</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes/atherosclerotic-disease-cad-pad"
><span class="text-indent_n1 inline-block m-l_4">Atherosclerotic Disease (CAD/PAD)</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/cardiac-surgery"
><span class="text-indent_n1 inline-block m-l_4">Cardiac Surgery</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/cardio-oncology"
><span class="text-indent_n1 inline-block m-l_4">Cardio-Oncology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/congenital-heart-disease-pediatric-cardiology"
><span class="text-indent_n1 inline-block m-l_4">Congenital Heart Disease and Pediatric Cardiology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/diabetes-and-cardiometabolic-disease.zip"
><span class="text-indent_n1 inline-block m-l_4">Diabetes and Cardiometabolic Disease</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/dyslipidemia"
title="Dyslipidemia"
><span class="text-indent_n1 inline-block m-l_4">Dyslipidemia</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/geriatric-cardiology"
><span class="text-indent_n1 inline-block m-l_4">Geriatric Cardiology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/heart-failure-and-cardiomyopathies"
title="Heart Failure and Cardiomyopathies"
><span class="text-indent_n1 inline-block m-l_4">Heart Failure and Cardiomyopathies</span></a
>
</li>
</ul> </div>
<div
class="p-x_2 p-y_0 p-y_2:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md dropdown_column w_50:md"
>
<ul class="ul_none lh_2"
id="SubLinkCollapseParent">
<li class="m-b_2">
<a class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes"><span
class="text-indent_n1 inline-block m-l_4">Acute
Coronary Syndromes</span></span></a>
</li>
<li class="m-b_2">
<a class="dropdown-item link transition_4 wrap"
href="/clinical-topics/anticoagulation-management"
title="Anticoagulation Management"><span
class="text-indent_n1 inline-block m-l_4">Anticoagulation
Management</span></a>
</li>
<li class="m-b_2">
<div
class="flex justify_start transition_4 dropdown-item link">
<button class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
data-bs-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="learningCollapse"
data-bs-target="#learningCollapse"
onclick="event.stopPropagation()">
<i
class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
</button>
<a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
href="#">Online Learning Catalog</a>
</div>
<ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
id="learningCollapse">
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/earncredit"><span
class="text-indent_n1 inline-block m-l_5">Earn
Credit</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/board-prep-offerings"
title="Board Prep Offerings"><span
class="text-indent_n1 inline-block m-l_5">Board
Prep Offerings</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/education-catalog"><span
class="text-indent_n1 inline-block m-l_5">View
the Entire Catalog</span></a>
</li>
</ul>
</li>
<li class="m-b_2">
<div
class="flex justify_start transition_4 dropdown-item link">
<a class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
data-bs-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="productsCollapse"
data-bs-target="#productsCollapse"
onclick="event.stopPropagation()">
<i
class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
</a>
<a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
href="/education-and-meetings/education-catalog">Products</a>
</div>
<ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
id="productsCollapse">
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/accsap"><span
class="text-indent_n1 inline-block m-l_5">ACCSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/accel-audio"><span
class="text-indent_n1 inline-block m-l_5">ACCEL</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/cardiosource-plus"><span
class="text-indent_n1 inline-block m-l_5">CardioSource
Plus for Institutions and
Practices</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/cathsap"><span
class="text-indent_n1 inline-block m-l_5">CathSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/ecg-drill-and-practice"
title="ECG Drill and Practice"><span
class="text-indent_n1 inline-block m-l_5">ECG
Drill and Practice</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/echosap"><span
class="text-indent_n1 inline-block m-l_5">EchoSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/epsap"><span
class="text-indent_n1 inline-block m-l_5">EP
SAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/heart-songs-5"><span
class="text-indent_n1 inline-block m-l_5">Heart
Songs</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/iscience"><span
class="text-indent_n1 inline-block m-l_5">iScience</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod"><span
class="text-indent_n1 inline-block m-l_5">Nuclear
Cardiology and Cardiac CT Meeting on
Demand</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure"><span
class="text-indent_n1 inline-block m-l_5">RightSTEPS
Optimizing Medical Therapy for
Chronic Heart
Failure</span></a>
</li>
</ul>
</li>
</ul> </div>
</div>Code Sample
Source: dist/css/acc_boot.css, line 14300
5.1.4.4 Nav Dropdown with Alternate Content in Links
It is easy to add images in replace of text links in the navs.
Example
Default styling
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="p-x_2 p-y_0 p-y_2:md order_2 order_1:md dropdown_column w_50:md">
<ul class="ul_none lh_2">
<li class="relative m-x_2:md m-x_3">
<a
href="http://cvquality.acc.org/?_ga=2.33577825.159963902.1562853382-843642371.1562007133"
target="_blank"
class="transition_1 h:opacity opacity_8"
><img
src="https://www.acc.org/~/media/Non-Clinical/Images/External%20Site%20Logos/ACC_QII_logo.png"
alt="QII" class="w_100 max-w_20"
/></a>
</li>
<li class="relative m-x_2:md m-x_3">
<a href="http://cvquality.acc.org/NCDR-Home.aspx?_ga=2.91395290.159963902.1562853382-843642371.1562007133" target="_blank" class="transition_1 h:opacity opacity_8"><img src="https://www.acc.org/~/media/Non-Clinical/Images/External Site Logos/ACC_NCDR_logo.png" alt="NCDR" class="w_100 max-w_20"></a>
</li>
</ul> </div>
<div
class="p-x_2 p-y_0 p-y_2:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md order_1 order_2:md dropdown_column w_50:md"
>
<ul class="ul_none lh_2"
id="SubLinkCollapseParent">
<li class="m-b_2">
<a class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes"><span
class="text-indent_n1 inline-block m-l_4">Acute
Coronary Syndromes</span></span></a>
</li>
<li class="m-b_2">
<a class="dropdown-item link transition_4 wrap"
href="/clinical-topics/anticoagulation-management"
title="Anticoagulation Management"><span
class="text-indent_n1 inline-block m-l_4">Anticoagulation
Management</span></a>
</li>
<li class="m-b_2">
<div
class="flex justify_start transition_4 dropdown-item link">
<button class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
data-bs-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="learningCollapse"
data-bs-target="#learningCollapse"
onclick="event.stopPropagation()">
<i
class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
</button>
<a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
href="#">Online Learning Catalog</a>
</div>
<ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
id="learningCollapse">
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/earncredit"><span
class="text-indent_n1 inline-block m-l_5">Earn
Credit</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/board-prep-offerings"
title="Board Prep Offerings"><span
class="text-indent_n1 inline-block m-l_5">Board
Prep Offerings</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/education-catalog"><span
class="text-indent_n1 inline-block m-l_5">View
the Entire Catalog</span></a>
</li>
</ul>
</li>
<li class="m-b_2">
<div
class="flex justify_start transition_4 dropdown-item link">
<a class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
data-bs-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="productsCollapse"
data-bs-target="#productsCollapse"
onclick="event.stopPropagation()">
<i
class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
</a>
<a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
href="/education-and-meetings/education-catalog">Products</a>
</div>
<ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
id="productsCollapse">
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/accsap"><span
class="text-indent_n1 inline-block m-l_5">ACCSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/accel-audio"><span
class="text-indent_n1 inline-block m-l_5">ACCEL</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/cardiosource-plus"><span
class="text-indent_n1 inline-block m-l_5">CardioSource
Plus for Institutions and
Practices</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/cathsap"><span
class="text-indent_n1 inline-block m-l_5">CathSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/ecg-drill-and-practice"
title="ECG Drill and Practice"><span
class="text-indent_n1 inline-block m-l_5">ECG
Drill and Practice</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/echosap"><span
class="text-indent_n1 inline-block m-l_5">EchoSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/epsap"><span
class="text-indent_n1 inline-block m-l_5">EP
SAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/heart-songs-5"><span
class="text-indent_n1 inline-block m-l_5">Heart
Songs</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/iscience"><span
class="text-indent_n1 inline-block m-l_5">iScience</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod"><span
class="text-indent_n1 inline-block m-l_5">Nuclear
Cardiology and Cardiac CT Meeting on
Demand</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure"><span
class="text-indent_n1 inline-block m-l_5">RightSTEPS
Optimizing Medical Therapy for
Chronic Heart
Failure</span></a>
</li>
</ul>
</li>
</ul> </div>
</div>Code Sample
Source: dist/css/acc_boot.css, line 14047
5.1.5 Login Nav
The ACC.org Nav has a shade nav that houses the login and profile nav with a shade color. To make sure it doesn't resize when the main nav expands the login nav needs to be placed absolutely.
Example
Default styling
<nav class="font_1 absolute bg_primary br-t_1 br_primary br_solid br_none flex_shrink font_0 font_0:lg m-l_auto navbar navbar-dark navbar-expand p-y_2 r_0 t_0 b_0:lg relative:lg" >
<ul class="navbar-nav">
<li class="nav-item relative flex_shrink dropdown">
<a class="nav-link expanded-click-area [a:c_white] h:c_white nowrap"
role="button"
id="dropdownMyACC"
data-bs-toggle="dropdown"
aria-expanded="false"
>My ACC <i class="far icon-toggle_chevron-up-down"></i></a>
<div
class="dropdown-menu font_copy br-t_0 dropdown-menu-end br_none br_solid:lg m-t_0 m-t_2:lg font_0" aria-labelledby="dropdownMyACC"
>
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="p-x_2 p-y_0 dropdown_column">
<ul class="ul_none lh_2 m_0">
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-profile">My Profile</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-training-program">My Training Programs</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-membership">My Membership</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-library">My Library</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="http://edu.acc.org/diweb/dashboard">My Learning Dashboard</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="http://edu.acc.org/diweb/grades">My Transcript</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/ncdr-physician-dashboard">NCDR Physician Dashboard</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-communication-preferences">My Communication Preferences</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="https://memberhub.acc.org/">ACC Member Hub</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-purchase-history">My Purchases</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/personalization">Personalize ACC.org</a>
</li>
<div class="dropdown-divider m-y_3"></div>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/RemoteLogOff"> Logout</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class=" nav-link nowrap" href="#"><i class="far fa-shopping-cart"></i></a>
</li>
<!--<li class="nav-item">
<a class=" nav-link nowrap" href="#"><i class="fas fa-sign-out-alt"></i></a>
</li>-->
<!--<li class="nav-item">
<a href="@loginlink" class="nav-link nowrap"><i class="fas fa-sign-in-alt"></i> Log in to MyACC </a>
</li>-->
</ul>
</nav>Code Sample
Source: dist/css/acc_boot.css, line 6549
5.2 Toggle
Toggle elements of a collapse with user feed back of the icon rotating.
Example s
#targetName
the name of the target of the collapse
<div class="flex_none p_2" data-bs-toggle="collapse" data-bs-target="[modifier class]" aria-controls="[modifier class]" aria-expanded="true">
<i class="a:rotation fa-fw fa-times fas self_center text_center"></i>
</div>Code Sample
Source: dist/css/acc_boot.css, line 7851
5.2 Toggle
Toggle elements of a collapse with user feed back of the icon rotating.
Example s
#targetName
the name of the target of the collapse
<div class="flex_none p_2" data-bs-toggle="collapse" data-bs-target="[modifier class]" aria-controls="[modifier class]" aria-expanded="true">
<i class="a:rotation fa-fw fa-times fas self_center text_center"></i>
</div>Code Sample
Source: dist/css/acc_boot.css, line 6585
5.2.1 Collapse Toggle Advanced
Toggle elements of a collapse with user feed back of the icon morphing.
Example s
#targetName
the name of the target of the collapse
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="[modifier class]" aria-controls="[modifier class]">
<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>Code Sample
Source: dist/css/acc_boot.css, line 7887
5.2.1 Collapse Toggle Advanced
Toggle elements of a collapse with user feed back of the icon morphing.
Example s
#targetName
the name of the target of the collapse
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="[modifier class]" aria-controls="[modifier class]">
<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>Code Sample
Source: dist/css/acc_boot.css, line 6606
5.2.2 Collapse Toggle Advanced with Square
Toggle elements of a collapse with user feed back of the icon morphing.
Example s
#targetName
the name of the target of the collapse
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="[modifier class]" aria-controls="[modifier class]">
<span class="fa-stack">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-minus fa-stack-1x c_white"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x c_white"></i>
</span>
</div>Code Sample
Source: dist/css/acc_boot.css, line 7908
5.2.2 Collapse Toggle Advanced with Square
Toggle elements of a collapse with user feed back of the icon morphing.
Example s
#targetName
the name of the target of the collapse
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="[modifier class]" aria-controls="[modifier class]">
<span class="fa-stack">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-minus fa-stack-1x c_white"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x c_white"></i>
</span>
</div>Code Sample
Source: dist/css/acc_boot.css, line 6567
5.2.3 Toggle Chevron
Toggle elements of a collapse with user feed back of the icon rotating.
Example s
#targetName
the name of the target of the collapse
<div class="a:bg_black-3 h:bg_black-4 flex_none p_2" data-bs-toggle="collapse" data-bs-target="[modifier class]" aria-controls="[modifier class]" aria-expanded="true">
<i class="a:rotation fa-fw fa-chevron-up fas self_center text_center"></i>
</div>Code Sample
Source: dist/css/acc_boot.css, line 7869
5.2.3 Toggle Chevron
Toggle elements of a collapse with user feed back of the icon rotating.
Example s
#targetName
the name of the target of the collapse
<div class="a:bg_black-3 h:bg_black-4 flex_none p_2" data-bs-toggle="collapse" data-bs-target="[modifier class]" aria-controls="[modifier class]" aria-expanded="true">
<i class="a:rotation fa-fw fa-chevron-up fas self_center text_center"></i>
</div>Code Sample
Source: dist/css/acc_boot.css, line 6514
5.2.4 Bootstrap Toggle Rotation
The toggles for bootstrap collapses use a + icon that twists to an x when the elements doesn't have collapsed or show as a class. to reduce confusion the class has a set rotation and speed attached to it. a:rotation is applied to the tow specific icons fa-times and fa-chevron-up only.
These classes are effected by the parent having
collapsed state.Example s
expanded
when the associated content is expanded the toggle will look like this
collapsed
when the associated content is collapsed the class is added to the toggle and it will look like this.
<div class="flex_none p_2 [modifier class]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<i class="a:rotation c_primary fa-fw fa-times fas self_center text_center"></i>
</div>
<div class="flex_none p_2 [modifier class]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<i class="a:rotation c_primary fa-fw fa-chevron-up fas self_center text_center"></i>
</div>
<div class="flex_none p_2 [modifier class]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<span class="fa-stack fa-2x">
<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 class="flex_none p_2 [modifier class]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x c_black"></i>
<i class="fas fa-minus fa-stack-1x c_white"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x c_white"></i>
</span>
</div>Code Sample
Source: dist/css/acc_boot.css, line 7816
5.2.4 Bootstrap Toggle Rotation
The toggles for bootstrap collapses use a + icon that twists to an x when the elements doesn't have collapsed or show as a class. to reduce confusion the class has a set rotation and speed attached to it. a:rotation is applied to the tow specific icons fa-times and fa-chevron-up only.
These classes are effected by the parent having
collapsed state.Example s
expanded
when the associated content is expanded the toggle will look like this
collapsed
when the associated content is collapsed the class is added to the toggle and it will look like this.
<div class="flex_none p_2 [modifier class]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<i class="a:rotation c_primary fa-fw fa-times fas self_center text_center"></i>
</div>
<div class="flex_none p_2 [modifier class]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<i class="a:rotation c_primary fa-fw fa-chevron-up fas self_center text_center"></i>
</div>
<div class="flex_none p_2 [modifier class]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<span class="fa-stack fa-2x">
<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 class="flex_none p_2 [modifier class]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x c_black"></i>
<i class="fas fa-minus fa-stack-1x c_white"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x c_white"></i>
</span>
</div>Code Sample
Source: dist/css/acc_boot.css, line 8451
5.3 Page Hub
A collection of links that collapses the children of the nav item.
Example
Default styling
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<nav class="flex flex_row:md flex_column gap-x_4 gap-y_4 gap_4">
<div class="flex flex_column gap-y_4 flex_none:md w_50:md">
<ul class="c_primary font_copy ul_none font_1">
<li class="nav-item active" data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<div class="flex_none" >
<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="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
<nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
<ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5 m-t_3 p-l_3 gap-y_3 lh_1">
<li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>
</ul> <ul class="c_primary font_copy ul_none font_1">
<li class="nav-item active" data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<div class="flex_none" >
<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="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
<nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
<ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5 m-t_3 p-l_3 gap-y_3 lh_1">
<li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>
</ul> <ul class="c_primary font_copy ul_none font_1">
<li class="nav-item active" data-nav="child">
<div class="flex flex_row">
<div class="opacity_0 flex flex_column flex_none font-size_down p-y_2 justify_start" aria-expanded="false">
<div class="flex_none " >
<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="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
</div>
</div>
</li>
</ul> <ul class="c_primary font_copy ul_none font_1">
<li class="nav-item active" data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<div class="flex_none" >
<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="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
<nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
<ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5 m-t_3 p-l_3 gap-y_3 lh_1">
<li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>
</ul> </div>
<div class="flex flex_column gap-y_4 flex_none:md w_50:md">
<ul class="c_primary font_copy ul_none font_1">
<li class="nav-item active" data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<div class="flex_none" >
<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="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
<nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
<ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5 m-t_3 p-l_3 gap-y_3 lh_1">
<li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>
</ul> <ul class="c_primary font_copy ul_none font_1">
<li class="nav-item active" data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<div class="flex_none" >
<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="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
<nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
<ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5 m-t_3 p-l_3 gap-y_3 lh_1">
<li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>
</ul> <ul class="c_primary font_copy ul_none font_1">
<li class="nav-item active" data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<div class="flex_none" >
<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="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
<nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
<ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5 m-t_3 p-l_3 gap-y_3 lh_1">
<li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>
</ul> </div>
</nav>Code Sample
Source: dist/css/acc_boot.css, line 8546
5.3.1 Page Hub Children
Child link item for the page hub.
Example s
Child Link
Text of the link
<li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">[modifier class]</a>
</div>
</div>
</li>Code Sample
Source: dist/css/acc_boot.css, line 8508
5.3.2 Page Hub Group
A collection of links that collapses the children of the nav item.
Example
Default styling
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<ul class="c_primary font_copy ul_none font_1">
<li class="nav-item active" data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<div class="flex_none" >
<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="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
<nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
<ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5 m-t_3 p-l_3 gap-y_3 lh_1">
<li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
</div>
</div>
</li> <li class="nav-item" data-nav="child">
<div class="flex flex_row">
<div class="flex_auto self_center p-l_3">
<a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>
</ul>Code Sample
Source: dist/css/acc_boot.css, line 8478
5.3.3 Page Hub Single
A collection of links that collapses the children of the nav item.
Example
Default styling
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<ul class="c_primary font_copy ul_none font_1">
<li class="nav-item active" data-nav="child">
<div class="flex flex_row">
<div class="opacity_0 flex flex_column flex_none font-size_down p-y_2 justify_start" aria-expanded="false">
<div class="flex_none " >
<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="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
</div>
</div>
</li>
</ul>Code Sample
Source: dist/css/acc_boot.css, line 6314
5.4 Sidebar Nav
Description: Side bar for any 3 layer nav on the site. the parent node is from the main nav.
Example
Default styling
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>Code Sample
Source: dist/css/acc_boot.css, line 7616
5.4 Sidebar Nav
Description: Side bar for any 3 layer nav on the site. the parent node is from the main nav.
Example
Default styling
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>Code Sample
Source: dist/css/acc_boot.css, line 6341
5.4.1 Parent NavItem
Description: The parent is singular in this nav it is always active and its direct children are always expanded so there is not need for a toggle.
Example
Default styling
<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>Code Sample
Source: dist/css/acc_boot.css, line 7643
5.4.1 Parent NavItem
Description: The parent is singular in this nav it is always active and its direct children are always expanded so there is not need for a toggle.
Example
Default styling
<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>Code Sample
Source: dist/css/acc_boot.css, line 6389
5.4.2 Toggle Child
Description: Toggle elements are set to active if the attached node or its children are active. If the toggle is active the collapsed children navigation are open by default.
Example s
default
the toggle when it doesn't have an active class still shades on hover
active
shade the toggle
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<div class="[modifier class] 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>Code Sample
Source: dist/css/acc_boot.css, line 7691
5.4.2 Toggle Child
Description: Toggle elements are set to active if the attached node or its children are active. If the toggle is active the collapsed children navigation are open by default.
Example s
default
the toggle when it doesn't have an active class still shades on hover
active
shade the toggle
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<div class="[modifier class] 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>Code Sample
Source: dist/css/acc_boot.css, line 6359
5.4.3 Child NavItem
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 s
default
No added class
active
Nav Item changes its decoration if this the page the user is on.
<li class="nav-item [modifier class]" 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 [modifier class] 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>Code Sample
Source: dist/css/acc_boot.css, line 7661
5.4.3 Child NavItem
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 s
default
No added class
active
Nav Item changes its decoration if this the page the user is on.
<li class="nav-item [modifier class]" 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 [modifier class] 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>Code Sample
Source: dist/css/acc_boot.css, line 6411
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.
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>Code Sample
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.
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>Code Sample
Source: dist/css/acc_boot.css, line 6444
5.4.5 Child NavItem With Grand 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 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>Code Sample
Source: dist/css/acc_boot.css, line 7746
5.4.5 Child NavItem With Grand 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 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>Code Sample
Source: dist/css/acc_boot.css, line 6491
5.4.6 Great Grandchild NavItem
Description: Great Grand Children loose the spacer for toggles because they don't have any child navs and don't need the use of a toggle.
Example s
default
No added class
active
Nav Item changes its decoration if this the page the user is on.
<li class="nav-item [modifier class] " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" [modifier 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>Code Sample
Source: dist/css/acc_boot.css, line 7793
5.4.6 Great Grandchild NavItem
Description: Great Grand Children loose the spacer for toggles because they don't have any child navs and don't need the use of a toggle.
Example s
default
No added class
active
Nav Item changes its decoration if this the page the user is on.
<li class="nav-item [modifier class] " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" [modifier 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>