Month: January 2023

Regardless of what UX designers may say about nested menu (submenus or even sub-submenus), sometimes you need to make one. I couldn’t find clear simple guidance for this, so I cobbled one together by following various examples and watching a few youtube videos. Finally, it made sense what is needed — You need to set the data-bs-auto-close attribute to ‘outside’ for items in the menu that are going to contain a submenu so that they pop open the submenu instead of simply disappearing. No javascript required.

<div class="container">
    <h1 class="mb-4">Nested Submenus</h1>
    <p>No Javascript needed</p>
    <div class="dropdown">
        <a class="btn btn-primary dropdown-toggle" data-bs-auto-close='outside' href="#" 
        role="button" data-bs-toggle="dropdown" aria-expanded="false"> Menu </a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Widescreen</a></li>
            <li class="dropdown dropend">
                
                <!-- the key is the data-bs-auto-close attribute being set to Outside for anything that contains a submenu -->
                
                <a class="dropdown-item dropdown-toggle" href="#"
                data-bs-auto-close='outside'
                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Submenu 001</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Bonjour!</a></li>
                    <li class="dropdown dropend">
                        <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-haspopup="true" 
                        
                        aria-expanded="false">Submenu 001 001</a>
                        <ul class="dropdown-menu" >
                            <li><a class="dropdown-item" href="#">Eat</a></li>
                            <li><a class="dropdown-item" href="#">More</a></li>
                            <li><a class="dropdown-item" href="#">Beans</a></li>
                            <li><a class="dropdown-item" href="#">On Toast</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown-item" href="#">Drink Coffee</a></li>
                    <li><a class="dropdown-item" href="#">Make Friends</a></li>
                </ul>
            </li>
            <li><a class="dropdown-item" href="#">Don't forget to Exercise</a></li>
        </ul>
    </div>
</div>

The same code is here on Codeply: https://www.codeply.com/p/XzzSC2FZ7O

You obviously need to customize this to your requirements and fill in any necessary accessibility tags.

To all the people (or AIs) from whom I derived knowledge in the crafting of this post, I say: thank you.