Shrink & expand end menu items depend on container or screen width.

[ve3]

Hi, I've created JS to work with shrink and expand end (last) menu items depend on container element or screen width. I'll share here in case you may interest to implement into your current work.

Main files

/**
 * Responsive navbar
 * 
 * @license MIT rundiz.com
 */


class RdResponsiveNavbar {


    /**
     * @type {boolean} Mark that previously was stopped working or not, just to prevent multiple working in loops.
     */
    #isPreviousStoppedWorking = null;


    /**
     * @type {boolean} Mark this class to stop working. (Stop detect resize, element size change and make responsive navbar work.)
     */
    #isStopWorking = false;


    /**
     * @type {number} Minimum break point (screen width) that this will be stop working and restore original navbar with wrapper.
     */
    #minBreakPointStopWorking = 0;


    /**
     * @type {string} Navbar class name. Default is 'rd-navbar-nav'.
     */
    #navbarClass = 'rd-navbar-nav';


    /**
     * @type {string} Class name of responsive navbar item. (Usually it is `li` of main navbar.) 
     *              This item will show up when area is narrower than navbar. 
     *              Default is 'rd-nav-item-responsive'.
     */
    #navItemResponsiveClass = 'rd-nav-item-responsive';


    /**
     * @type {string} Class name of responsive navbar item that is currently active. Default is 'rd-nav-item-responsive-active'.
     */
    #navItemResponsiveActiveClass = 'rd-nav-item-responsive-active';


    /**
     * @type {string} Class name of responsive navbar item link.
     */
    #navItemResponsiveLinkClass = 'rd-nav-link-responsive';


    /**
     * @type {string} Text or HTML inside responsive navbar item link.
     */
    #navItemResponsiveLinkText = '...';


    /**
     * @type {string} Class name of navbar submenu (ul) of responsive navbar item. Default is 'rd-nav-submenu-responsive'.
     */
    #navSubMenuResponsiveClass = 'rd-nav-submenu-responsive';


    /**
     * @type {number} Number of offset when screen is wider so that navbar can expand/show up and did not cause horizontal scroll bar.
     */
    #offsetWider = 50;


    /**
     * @type {Element} Original HTML of navbar (including wrapper).
     */
    #originalHTML;


    /**
     * @type {string} The selector of HTML that wrap navbar.
     */
    #selector = '.rd-responsive-navbar';


    /**
     * Responsive navbar. This should work per single navbar.
     * 
     * @param {object} options The options 
     * @param {string} options.selector The selector of HTML that wrap navbar. Default is `.rd-responsive-navbar`.
     * @param {number} options.offsetWider Number of offset when screen is wider so that navbar can expand/show up and did not cause horizontal scroll bar. 
     *              Default is 50 OR a navigation bar item that have maximum width.  
     *              Value type must be integer.
     * @param {number} options.minBreakPointStopWorking Minimum break point (screen width) that this will be stop working and restore original navbar with wrapper. 
     *              Default is 0.  
     *              Value must be integer and value less than or equal to 0 will be always working.  
     *              This is to let something else to be working instead in case this is on top of other navbar framework.
     * @param {string} options.navItemResponsiveActiveClass Class name of responsive navbar item that is currently active. 
     *              Default is 'rd-nav-item-responsive-active'.
     * @param {string} options.navItemResponsiveLinkText Text or HTML inside responsive navbar item link. Default is '...'.
     * @param {string} options.navSubMenuResponsiveClass Class name of navbar submenu (ul) of responsive navbar item. 
     *              Default is 'rd-nav-submenu-responsive'.
     */
    constructor(options = {}) {
        if (typeof(options?.selector) === 'string') {
            this.#selector = options.selector;
        }
        if (typeof(options?.offsetWider) === 'number') {
            this.#offsetWider = parseInt(options.offsetWider);
        } else {
            const maxNavWidth = this.#getMaxNavItemWidth();
            if (!isNaN(maxNavWidth)) {
                this.#offsetWider = maxNavWidth;
            }
        }
        if (typeof(options?.minBreakPointStopWorking) === 'number') {
            this.#minBreakPointStopWorking = parseInt(options.minBreakPointStopWorking);
        }
        if (typeof(options?.navItemResponsiveLinkText) === 'string') {
            this.#navItemResponsiveLinkText = options.navItemResponsiveLinkText;
        }
        if (typeof(options?.navItemResponsiveActiveClass) === 'string') {
            this.#navItemResponsiveActiveClass = options.navItemResponsiveActiveClass;
        }
        if (typeof(options?.navSubMenuResponsiveClass) === 'string') {
            this.#navSubMenuResponsiveClass = options.navSubMenuResponsiveClass;
        }

        let navbarWrapper = document.querySelector(this.#selector);
        if (!navbarWrapper) {
            throw new Error('Navbar wrapper with selector "' + this.#selector + '" could not be found.');
        }
        if (!navbarWrapper.querySelector('.' + this.#navbarClass)) {
            throw new Error('Navbar class `' + this.#navbarClass + '` could not be found.');
        }
        navbarWrapper = undefined;

        this.#keepOriginalHTML();

        this.#checkMinBreakPoint();
        this.#setupResponsiveLastMenuItem();
        this.#listenClickShowHideResponsiveNavbarItem();
        this.#listenResize();
    }// constructor


    /**
     * Check minimum break point and current screen width that must be equal or wider than break point to work.
     * 
     * If minimum break point option was not set then this will skip working.
     * 
     * This method was called from `constructor()`.
     */
    #checkMinBreakPoint() {
        if (this.#minBreakPointStopWorking > 0) {
            const navbarWrapper = document.querySelector(this.#selector);

            if (window.screen.width < this.#minBreakPointStopWorking) {
                this.#isStopWorking = true;
                if (true !== this.#isPreviousStoppedWorking) {
                    this.#isPreviousStoppedWorking = true;
                    do {
                        const subMenuResponsiveItem = document.querySelector(this.#selector + ' .' + this.#navItemResponsiveClass + ' > .' + this.#navSubMenuResponsiveClass + ' > li');
                        if (!subMenuResponsiveItem) {
                            break;
                        }
                        this.#moveFirstResponsiveMenuItemToLastMenuItem();
                    } while (true);
                }
            } else {
                this.#isStopWorking = false;
                if (false !== this.#isPreviousStoppedWorking) {
                    this.#isPreviousStoppedWorking = false;
                }
            }
        }
    }// #checkMinBreakPoint


    /**
     * Get maximum navigation items width.
     * 
     * This method was called from `constructor()`.
     * 
     * @returns {number} Return max width.
     */
    #getMaxNavItemWidth() {
        const navbarWrapper = document.querySelector(this.#selector);
        const navItemsWidth = [];
        navbarWrapper.querySelectorAll('.' + this.#navbarClass + ' > li')?.forEach((item) => {
            if (item.classList.contains(this.#navItemResponsiveClass)) {
                // if this item is navbar item responsive. 
                // do not work here.
                return ;
            }
            const itemRect = item.getBoundingClientRect();
            navItemsWidth.push(parseFloat(itemRect.width));
        });

        return Math.max(...navItemsWidth);
    }// #getMaxNavItemWidth


    /**
     * Keep original HTML of navbar (including wrapper).
     * 
     * This method was called from `constructor()`.
     */
    #keepOriginalHTML() {
        const navbarWrapper = document.querySelector(this.#selector);

        if (typeof(this.#originalHTML) === 'undefined') {
            const template = document.createElement('div');
            template.setAttribute('id', 'rd-responsive-navbar-original');
            template.setAttribute('style', 'display:none;');
            template.innerHTML = navbarWrapper.outerHTML;
            document.body.appendChild(template);
            // use just `cloneNode(true)` can still be altered by its original HTML.
            this.#originalHTML = template;
        }
    }// #keepOriginalHTML


    /**
     * Listen click to show/hide responsive sub menu.
     * 
     * This method was called from `constructor()`.
     */
    #listenClickShowHideResponsiveNavbarItem() {
        document.addEventListener('click', (event) => {
            if (event.target.closest('.' + this.#navItemResponsiveClass)) {
                // if click inside responsive navbar item.
                const thisTarget = event.currentTarget.activeElement;
                if (thisTarget.classList?.contains(this.#navItemResponsiveLinkClass)) {
                    // if clicking on responsive link inside responsive navbar item.
                    event.preventDefault();

                    this.toggleSubMenuResponsive();
                }
            } else {
                // if click outside responsive navbar item.
                // hide responsive sub menu.
                this.toggleSubMenuResponsive('hide');
            }
        });
    }// #listenClickShowHideResponsiveNavbarItem


    /**
     * Listen resize screen, or navbar wrapper and start to functional.
     * 
     * This method was called from `constructor()`.
     */
    #listenResize() {
        window.addEventListener('resize', (event) => {
            this.#checkMinBreakPoint();
        });

        const navbarWrapper = document.querySelector(this.#selector);
        if (!navbarWrapper.dataset.rdResponsiveNavbarObserved) {
            const resizeObserver = new ResizeObserver((entries) => {
                if (false === this.#isStopWorking) {
                    this.#navbarSizeMayChanged();
                }
            });
            resizeObserver.observe(navbarWrapper);
            navbarWrapper.dataset.rdResponsiveNavbarObserved = 'true';
        }
    }// #listenResize


    /**
     * Move first responsive menu item to last menu item (but before navbar item responsive).  
     * Or this method is restoration of `#moveLastMenuItemToResponsiveMenuItem()` but per item.
     * 
     * This method was called from `#navbarSizeMayChanged()`.
     * 
     * @returns 
     */
    #moveFirstResponsiveMenuItemToLastMenuItem() {
        const navbarNav = document.querySelector(this.#selector + ' > .' + this.#navbarClass);
        const responsiveMenuItem = navbarNav?.querySelector('.' + this.#navItemResponsiveClass);
        const firstResponsiveMenuItem = responsiveMenuItem?.querySelector('ul > li:first-child');
        if (typeof(firstResponsiveMenuItem) !== 'object' || firstResponsiveMenuItem === null) {
            return null;
        }

        let lastMenuItem = navbarNav.lastElementChild;
        lastMenuItem.insertAdjacentElement('beforebegin', firstResponsiveMenuItem);// this is already moved, no need to `remove()` source.

        if (!responsiveMenuItem?.querySelector('ul > li:first-child')) {
            responsiveMenuItem.style.display = 'none';
        }

        let customEvent = new CustomEvent('rundiz.responsivenavbar.moveResponsiveItemToLastItem', {
            'bubbles': true,
            'detail': {
                'firstResponsiveMenuItem': firstResponsiveMenuItem,
            }
        });
        document.dispatchEvent(customEvent);

        customEvent = new CustomEvent('rundiz.responsivenavbar.menuItemUpdated', {
            'bubbles': true,
        });
        document.dispatchEvent(customEvent);
    }// #moveFirstResponsiveMenuItemToLastMenuItem


    /**
     * Move last menu item to responsive menu item.
     * 
     * This method was called from `#navbarSizeMayChanged()`.
     */
    #moveLastMenuItemToResponsiveMenuItem() {
        const navbarNav = document.querySelector(this.#selector + ' > .' + this.#navbarClass);
        const navbarChildren = navbarNav.children;
        let lastMenuItem;
        if (navbarChildren.length >= 2) {
            lastMenuItem = navbarChildren[navbarChildren.length - 2];
        } else {
            return null;
        }

        if (lastMenuItem) {
            const responsiveMenuItem = navbarNav?.querySelector('.' + this.#navItemResponsiveClass);
            const responsiveMenuItemUL = responsiveMenuItem?.querySelector('ul');

            responsiveMenuItem.style.display = '';
            responsiveMenuItemUL.insertAdjacentElement('afterbegin', lastMenuItem);// this is already moved, no need to `remove()` source.

            let customEvent = new CustomEvent('rundiz.responsivenavbar.moveLastItemToResponsiveItem', {
                'bubbles': true,
                'detail': {
                    'lastMenuItem': lastMenuItem,
                }
            });
            document.dispatchEvent(customEvent);

            customEvent = new CustomEvent('rundiz.responsivenavbar.menuItemUpdated', {
                'bubbles': true,
            });
            document.dispatchEvent(customEvent);
        }
    }// #moveLastMenuItemToResponsiveMenuItem


    /**
     * Check that navbar size may changed then start functional.
     * 
     * This method was called from `#listenResize()`.
     */
    #navbarSizeMayChanged() {
        if (true === this.#isStopWorking) {
            return ;
        }

        const navbarWrapper = document.querySelector(this.#selector);
        const navbarWrapperRect = navbarWrapper.getBoundingClientRect();
        // calculate navbar wrapper's content width. 
        // can't use query `navbarWrapper > *` and just `getBoundingClientRect()` because some times, the navbar's content is `inline-block` and will cause incorrect size on expand which result in can't expand.
        // use this method in calculation. (nav wrapper's width - anything that consume space before its content (`ul`) such as padding, border.)
        const navbarWrapperComputed = window.getComputedStyle(navbarWrapper);
        let navbarWrapperContentWidth = navbarWrapperRect.width - (
            parseFloat(navbarWrapperComputed.paddingLeft) + parseFloat(navbarWrapperComputed.paddingRight)
        );
        navbarWrapperContentWidth = navbarWrapperContentWidth - (
            parseFloat(navbarWrapperComputed.borderLeftWidth) + parseFloat(navbarWrapperComputed.borderRightWidth)
        );
        if (isNaN(navbarWrapperContentWidth)) {
            console.info('[rd responsive navbar]: Navbar wrapper content has `NaN` width. Using navbar wrapper\'s width instead.', navbarWrapperRect.width, navbarWrapperComputed)
            navbarWrapperContentWidth = navbarWrapperRect.width;
        }

        let allNavItemsWidth = this.#sumAllNavItemsWidth();

        if (navbarWrapperContentWidth < allNavItemsWidth) {
            // if navbar wrapper width is narrower that its content or scroll bar appeared.
            do {
                let allNavItemsWidth = this.#sumAllNavItemsWidth();

                if (navbarWrapperContentWidth >= allNavItemsWidth) {
                    break;
                }

                const returnResult = this.#moveLastMenuItemToResponsiveMenuItem();

                if (typeof(returnResult) !== 'undefined' && null === returnResult) {
                    break;
                }
            } while (true);
        } else {
            // else. here, after resize window to larger it can be equal (navbar wrapper width vs navbar scroll width).
            // check the actual navbar items width.
            do {
                let allNavItemsWidth = this.#sumAllNavItemsWidth();

                if ((allNavItemsWidth + this.#offsetWider) <= navbarWrapperContentWidth) {
                    const returnResult = this.#moveFirstResponsiveMenuItemToLastMenuItem();
                    if (typeof(returnResult) !== 'undefined' && null === returnResult) {
                        break;
                    }
                } else {
                    break;
                }
            } while (true);
        }
    }// #navbarSizeMayChanged


    /**
     * Setup last menu item as responsive menu.
     * 
     * This method was called from `constructor()`.
     */
    #setupResponsiveLastMenuItem() {
        const navbarNav = document.querySelector(this.#selector + ' > .' + this.#navbarClass);
        if (navbarNav && !navbarNav?.querySelector('.' + this.#navItemResponsiveClass)) {
            const html = '<li class="' + this.#navItemResponsiveClass + '" style="display: none;">' + "\n"
                + '<a class="' + this.#navItemResponsiveLinkClass + '" href="#">' + this.#navItemResponsiveLinkText + '</a>' + "\n"
                + '<ul class="' + this.#navSubMenuResponsiveClass + '"></ul>' + "\n"
                + '</li>';
            navbarNav.insertAdjacentHTML('beforeend', html);

            const customEvent = new CustomEvent('rundiz.responsivenavbar.setupsuccess', {
                'bubbles': true,
            });
            document.dispatchEvent(customEvent);
        }
    }// #setupResponsiveLastMenuItem


    /**
     * Summary all nav items width.
     * 
     * This method was called from `#navbarSizeMayChanged()`.
     * 
     * @returns {number} Return total nav items width.
     */
    #sumAllNavItemsWidth() {
        const navbarWrapper = document.querySelector(this.#selector);
        let totalNavItemWidth = 0;
        navbarWrapper.querySelectorAll('.' + this.#navbarClass + ' > li')?.forEach((item) => {
            if (item.classList.contains(this.#navItemResponsiveClass)) {
                // if this item is navbar item responsive. 
                // do not calculate here.
                return ;
            }
            const itemRect = item.getBoundingClientRect();
            totalNavItemWidth = Math.ceil(parseFloat(totalNavItemWidth) + parseFloat(itemRect.width));
        });

        // calculate including width of navbar item responsive (last one) that is maybe hiding.
        const navItemResponsive = navbarWrapper.querySelector('.' + this.#navItemResponsiveClass);
        if (navItemResponsive) {
            const originalDisplay = navItemResponsive.style.display;
            const originalVisibility = navItemResponsive.style.visibility;
            navItemResponsive.style.display = '';
            navItemResponsive.style.visibility = 'hidden';
            const navItemResponsiveWidth = navItemResponsive.offsetWidth;
            navItemResponsive.style.display = originalDisplay;
            navItemResponsive.style.visibility = originalVisibility;
            totalNavItemWidth = Math.ceil(parseFloat(totalNavItemWidth) + parseFloat(navItemResponsiveWidth));
        }// endif;

        return totalNavItemWidth;
    }// #sumAllNavItemsWidth


    /**
     * Toggle sub menu responsive (show/hide).
     * 
     * @param {string|null} doing What action is doing. Accepted: 'hide', 'show', `null`. Default is `null` to auto detect.
     */
    toggleSubMenuResponsive(doing = null) {
        const navItemResponsive = document.querySelector('.' + this.#navItemResponsiveClass);
        const submenu = navItemResponsive?.querySelector('.' + this.#navSubMenuResponsiveClass);
        const submenuDisplayingClass = 'rd-display-submenu-responsive-item';

        if (null === doing) {
            if (submenu?.classList?.contains(submenuDisplayingClass)) {
                submenu?.classList?.remove(submenuDisplayingClass);
                navItemResponsive?.classList?.remove(this.#navItemResponsiveActiveClass);
            } else {
                submenu?.classList?.add(submenuDisplayingClass);
                navItemResponsive?.classList?.add(this.#navItemResponsiveActiveClass);
            }
        } else if ('show' === doing) {
            submenu?.classList?.add(submenuDisplayingClass);
            navItemResponsive?.classList?.add(this.#navItemResponsiveActiveClass);
        } else if ('hide' === doing) {
            submenu?.classList?.remove(submenuDisplayingClass);
            navItemResponsive?.classList?.remove(this.#navItemResponsiveActiveClass);
        }
    }// toggleSubMenuResponsive


}// RdResponsiveNavbar

rd-responsive-navbar.js

.rd-navbar-nav {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
}
.rd-navbar-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rd-navbar-nav li > * {
    padding: 8px;
}

.rd-navbar-nav .rd-nav-item-responsive {
    position: relative;
}
.rd-navbar-nav .rd-nav-item-responsive > .rd-nav-submenu-responsive {
    display: none;
    position: absolute;
    min-width: 80px;
    right: 0;
}
.rd-navbar-nav .rd-nav-item-responsive > .rd-display-submenu-responsive-item {
    display: block;
}

navbar.css

@media (min-width: 768px) {
    .rd-navbar-nav {
        display: flex;
        flex-direction: row;
        float: none !important;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .rd-responsive-navbar {
        min-width: 0;
    }
}

navbar-bootstrap.css

Usage

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Responsive navbar</title>
        <link rel="stylesheet" href="assets/css/navbar.css">
    </head>
    <body>
        <div class="rd-responsive-navbar">
            <ul class="rd-navbar-nav">
                <li><a href="#">Menu item 1</a></li>
                <li><a href="#">Menu item 2</a></li>
                <li><a href="#">Menu item 3</a></li>
                <li><a href="#">Menu item 4</a></li>
                <li><a href="#">Menu item 5</a></li>
                <li><a href="#">Menu item 6</a></li>
                <li><a href="#">Menu item 7</a></li>
                <li><a href="#">Menu item 8</a></li>
                <li><a href="#">Menu item 9</a></li>
                <li><a href="#10">Menu item 10</a></li>
            </ul>
        </div>
        <div class="container">
            <h1>The most minimal setup</h1>
        </div>

        <script src="assets/js/rd-responsive-navbar.js"></script>
        <script type="text/javascript">
            window.addEventListener('DOMContentLoaded', () => {
                const RdResponsiveNavbarObj = new RdResponsiveNavbar();
            });
        </script>
    </body>
</html>

simple-demo.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Responsive navbar</title>
        <link rel="stylesheet" href="assets/css/navbar-bootstrap.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <style>
            .rd-navbar-nav a {
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#navbar-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>
                <div id="navbar-1" class="collapse navbar-collapse rd-responsive-navbar">
                    <ul class="nav navbar-nav rd-navbar-nav">
                        <li><a href="#">Menu item 1</a></li>
                        <li><a href="#">Menu item 2</a></li>
                        <li><a href="#">Menu item 3</a></li>
                        <li><a href="#">Menu item 4</a></li>
                        <li><a href="#">Menu item 5</a></li>
                        <li><a href="#">Menu item 6</a></li>
                        <li><a href="#">Menu item 7</a></li>
                        <li><a href="#">Menu item 8</a></li>
                        <li><a href="#">Menu item 9</a></li>
                        <li><a href="#10">Menu item 10</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h1>With Bootstrap 3</h1>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script src="assets/js/rd-responsive-navbar.js"></script>
        <script type="text/javascript">
            window.addEventListener('DOMContentLoaded', () => {
                const RdResponsiveNavbarObj = new RdResponsiveNavbar({
                    'offsetWider': 180,
                    'minBreakPointStopWorking': 768,
                    'navSubMenuResponsiveClass': 'dropdown-menu',
                });
            });

            // add and remove some CSS classes to match Bootstrap.
            document.addEventListener('rundiz.responsivenavbar.setupsuccess', (event) => {
                const navItemResponsive = document.querySelector('.rd-nav-item-responsive');
                navItemResponsive?.classList?.add('dropdown');

                const navItemSubmenu = navItemResponsive?.querySelector('ul');
                navItemSubmenu?.classList?.add('dropdown-menu-right');

                const navItemLink = navItemResponsive?.querySelector('.rd-nav-link-responsive');
                navItemLink.classList?.add('dropdown-toggle');
                navItemLink.classList?.remove('rd-nav-link-responsive');
                navItemLink.dataset.toggle = 'dropdown';
                navItemLink.innerHTML = '<span class="caret"></span>';
            });
        </script>
    </body>
</html>

Bootstrap 3 with collapsible navbar.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Responsive navbar</title>
        <link rel="stylesheet" href="assets/css/navbar-bootstrap.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
        <style>
            .rd-navbar-nav a {
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-expand-md bg-body-tertiary mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Brand</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-1-content" aria-controls="navbar-1-content" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div id="navbar-1-content" class="collapse navbar-collapse rd-responsive-navbar">
                    <ul class="navbar-nav me-auto mb-md-0 rd-navbar-nav">
                        <li class="nav-item"><a class="nav-link" href="#">Menu item 1</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Menu item 2</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Menu item 3</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Menu item 4</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Menu item 5</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Menu item 6</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Menu item 7</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Menu item 8</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Menu item 9</a></li>
                        <li class="nav-item"><a class="nav-link" href="#10">Menu item 10</a></li>
                    </ul>
                </div>
            </div>
        </nav>


        <div class="container">
            <div class="row">
                <div class="col">
                    <h1 class="mt-3">With Bootstrap 5</h1>
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/rd-responsive-navbar.js"></script>
        <script type="text/javascript">
            window.addEventListener('DOMContentLoaded', () => {
                const RdResponsiveNavbarObj = new RdResponsiveNavbar({
                    'offsetWider': 125,
                    'minBreakPointStopWorking': 768,
                    'navSubMenuResponsiveClass': 'dropdown-menu',
                });
            });

            // add and remove some CSS classes to match Bootstrap.
            document.addEventListener('rundiz.responsivenavbar.setupsuccess', (event) => {
                const navItemResponsive = document.querySelector('.rd-nav-item-responsive');
                navItemResponsive?.classList?.add('nav-item', 'dropdown');

                const navItemSubmenu = navItemResponsive?.querySelector('ul');
                navItemSubmenu?.classList?.add('dropdown-menu-end');

                const navItemLink = navItemResponsive?.querySelector('.rd-nav-link-responsive');
                navItemLink.classList?.add('nav-link', 'dropdown-toggle');
                navItemLink.classList?.remove('rd-nav-link-responsive');
                navItemLink.dataset.bsToggle = 'dropdown';
                navItemLink.innerHTML = '';
            });
        </script>
    </body>
</html>

Bootstrap 5 with collapsible navbar.

Screenshots

How it works?

Here is the full width of web page or large screen size. The menu items will be show all.

This screenshot is for narrower screen width. The end menu items will be shrink into responsive menu item as sub menu (click on caret icon).

This screenshot is based on Bootstrap 5 md break point (768px). All menu items will be appears but in Bootstrap responsive navbar style.

With this JS, it can help long navbar menu items display better on more device (instead of over the screen or fall down to multiple lines). It can change minimum break point to stop working (and let the framework such as Bootstrap to work).

I hope it will be useful.