<div class="sticky t_0 flex l_0 r_0 relative:md z_4 bg_acc justify_center">
    <nav class="flex_auto max-w_90 font_n1 font_1:md font_2:lg font_display font_medium m-l_0 navbar navbar-dark navbar-expand-lg p_0 text_center:lg text_left">
        <!-- Primary Nav that expands on mobile and reveals extra nav items when on desktop. -->
        <ul class="navbar-nav flex flex_row w_100">
            <!-- When Nav is Active add the [ active ] classes to all locations to the basic design -->
            <li class="nav-item flex_auto [ active ]">
                <a class="[ active ][ text-shadow_black-1 ] a:bg_accent flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/" target="_self">
                    <i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-home-heart display_none:lg"></i>
                    <span class="block lh_0 p-y_0 p-y_2:md text_center">Primary: Active</span>
                </a>
            </li>            <!-- All areas that have `[ ]` in the design are areas where classes might be added or removed. -->
            <li class="nav-item flex_auto [~]">
                <a class="a:bg_accent [ text-shadow_black-1 ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/program" target="_self">
                    <!-- icon is needed for the Primary Button Nav -->
                    <i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-calendar-alt display_none:lg"></i>
                    <span class="block lh_0 p-y_0 p-y_2:md text_center">
                    <!--  []  -->
                    Primary
                    </span>
                </a>
            </li>            <li class="nav-item flex_auto ">
                <!-- If Button Disabled add the classes in the bracket to the Base Design and remove [ text-shadow_black-1 ] -->
                <a class="[ bg_secondary-2 c_secondary-3 disabled ] a:bg_accent flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/faculty" target="_blank">
                    <i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-users display_none:lg"></i>
                    <span class="block lh_0 p-y_0 p-y_2:md  text_center">
                        <!-- If Button Disabled Add This Icon --><i class="fas fa-lock p-r_3"></i>
                        Primary: Disabled
                    </span>
                </a>
            </li>            <!-- MENU toggle for mobile is a unique pattern -->
            <li class="nav-item flex_auto block display_none:lg">
                <a class="bg_secondary h:bg_secondary-n2 flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 font_medium h:c_white text-shadow_black-1 h:c_white justify_center nav-link text_center p-y_3:md" aria-expanded="false" aria-label="Toggle Extra Nav" data-bs-toggle="collapse" data-bs-target="#ExpandingMobileMenu" aria-controls="ExpandingMobileMenu"
                >
                    <i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-ellipsis-h-alt"></i>
                    <span class="block lh_0 p-y_0 p-y_2:md text_center">More</span>
                </a>
            </li>
            <!-- MENU toggle for mobile is a unique pattern -->            <!-- menu items that hide when in mobile under the expanded area -->
            <!-- if button shouldn't show in the main area on mobile add in classes `display_none block:lg` to hide on mobile so they only show up in the mobile expand area. -->
            <li class="nav-item flex_auto [ display_none block:lg ]">
                <a class="a:bg_accent [ text-shadow_black-1 ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/convocation" target="_self">
                    <!-- [~] -->
                    <span class="block lh_0 p-y_0 p-y_2:md text_center">Secondary</span>
                </a>
            </li>            <!-- if button shouldn't show in the main area on mobile add in classes `display_none block:lg` to hide on mobile so they only show up in the mobile expand area. -->
            <li class="nav-item flex_auto [ display_none block:lg ]">
                <a class="a:bg_accent [ bg_secondary-2 c_secondary-3 disabled  ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/convocation" target="_self">
                    <span class="block lh_0 p-y_0 p-y_2:md text_center">
                        <!-- If Button Disabled Add This Icon -->
                        <i class="fas fa-lock p-r_3"></i>
                        Secondary: Disabled
                    </span>
                </a>
            </li>            <!-- if button shouldn't show in the main area on mobile add in classes `display_none block:lg` to hide on mobile so they only show up in the mobile expand area. -->
            <li class="nav-item flex_auto [ display_none block:lg ]">
                <a class="a:bg_accent [ text-shadow_black-1 ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/convocation" target="_self">
                    <!-- [~] -->
                    <span class="block lh_0 p-y_0 p-y_2:md text_center">Secondary</span>
                </a>
            </li>        </ul>
        <!-- Expanding Mobile Menu -->
        <div class="collapse navbar-collapse" id="ExpandingMobileMenu">
            <ul class="navbar-nav flex shadow_emboss-light flex_column w_100 font_1 bg_black-2 display_none:lg" >
                <li class="nav-item flex_auto br-b_1 br_solid br_black-2">
                    <a class="[~] a:bg_accent-n1 nav-link font_medium h:bg_acc-n2 h:c_white text_left text_center:lg p-l_4 p-l_0:lg text-shadow_black-1 " href="/convocation" target="_self">
                        <!-- [~] -->
                        Mobile Menu Link
                    </a>
                </li>                <li class="nav-item flex_auto br-b_1 br_solid br_black-2">
                    <!-- if disabled add these classes to the a tag -->
                    <a class=" [ bg_secondary-2 c_secondary-3 disabled ]  a:bg_accent-n1 nav-link font_medium h:bg_acc-n2 h:c_white text_left text_center:lg p-l_4 p-l_0:lg" href="/convocation" target="_self">
                        <!-- If Button Disabled Add This Icon -->
                        <i class="fas fa-lock p-l_3"></i>
                        Mobile Menu Link: Disablled
                    </a>
                </li>                <li class="nav-item flex_auto br-b_1 br_solid br_black-2">
                    <a class="[~] a:bg_accent-n1 nav-link font_medium h:bg_acc-n2 h:c_white text_left text_center:lg p-l_4 p-l_0:lg text-shadow_black-1 " href="/convocation" target="_self">
                        <!-- [~] -->
                        Mobile Menu Link
                    </a>
                </li>            </ul>
        </div>
    </nav>
</div>