Overflow example

Figma
<nav class="qld__breadcrumbs" aria-label="breadcrumb" style="max-width: 1312px">
        <!-- Desktop-->
        <ul class="qld__breadcrumbs__list--desktop qld__link-list qld__link-list--inline" style="max-width: 1312px">
                <li>
                <a href="#">Home</a>
                </li>
                <!-- Overflow menu-->
                <li class="qld__overflow_menu--breadcrumbs" style="display: flex">
                        <div class="qld__overflow_menu_wrapper">
                                <button class="qld__btn qld__btn--toggle qld__overflow_menu__btn qld__accordion--closed"
                                        href="#" aria-controls="overflow-menu--" aria-expanded="false">
                                        <svg class="qld__icon qld__icon--lg" xmlns="http://www.w3.org/2000/svg"
                                                viewBox="0 0 448 512" aria-hidden="true" focusable="false" width="24"
                                                height="32" role="img">
                                                <path fill="currentColor"
                                                        d="M352 256C352 238.3 366.3 224 384 224C401.7 224 416 238.3 416 256C416 273.7 401.7 288 384 288C366.3 288 352 273.7 352 256zM192 256C192 238.3 206.3 224 224 224C241.7 224 256 238.3 256 256C256 273.7 241.7 288 224 288C206.3 288 192 273.7 192 256zM96 256C96 273.7 81.67 288 64 288C46.33 288 32 273.7 32 256C32 238.3 46.33 224 64 224C81.67 224 96 238.3 96 256z">
                                                </path>
                                        </svg>
                                </button>
                                <div class="qld__overflow_menu qld__accordion--closed" id="overflow-menu--">
                                        <ul class="qld__overflow_menu_list"
                                                aria-label="qld__overflow_menu qld__link-columns">
                                                <div class="qld__overflow_menu_list-item">
                                                        <a href="#" class="qld__overflow_menu_list-item-link"
                                                                tabindex="0">Level 1 breadcrumb link</a>
                                                </div>
                                                <div class="qld__overflow_menu_list-item">
                                                        <a href="#" class="qld__overflow_menu_list-item-link"
                                                                tabindex="0">Level 2 breadcrumb link</a>
                                                </div>
                                                <div class="qld__overflow_menu_list-item">
                                                        <a href="#" class="qld__overflow_menu_list-item-link"
                                                                tabindex="0">Level 3 breadcrumb link</a>
                                                </div>
                                        </ul>
                                </div>
                        </div>
                </li>
                <!-- Hidden breadcrumb links -->
                <li style="display: none"></li>
                <li style="display: none"></li>
                <!-- Parent page -->
                <li>
                <a href="#">Parent breadcrumb link </a>
                </li>
                 <!-- Current page -->
                <li aria-current="page" style="overflow: hidden">Currnt page</li>
        </ul>

        <!-- Mobile-->
        <ul class="qld__breadcrumbs__list--mobile qld__link-list qld__link-list--inline">
                <li>
                <a href="#">Parent link</a>
                </li>
        </ul>
</nav>
Last updated: August 2024