Nested DropdownMenus, Difference Between Raw HTML and Dash Library

[androidrhodium]

I used bootstrap components from the dash_bootsrap_components library to quickly prototype a nav menu in a dash app I'm running. In this nav menu, I did a sort of waterfall of nested dropdown menu items and it worked great! I went to build this same menu using a .asp file for production and found that nesting the dropdown menus didn't work the same. After some quick googling and stack overflowing I found some older workarounds that people have found and used but I'm trying to keep my production implementation as simple as possible with no custom bits. I also tried copying one of the navbar's nested dropdowns from the Dash app page's HTML along with including all of the javascript and CSS files to no avail. Most likely because the raw javascript from the Dash app's HTML has errors when included separately.

I've noted that the drop-down menus from the Dash library don't use a button to toggle the actual menu item whereas the raw HTML bootstrap does use a button within the dropdown class to show the dropdown menu.

The following is just snippets from the Bootstrap 4 documentation nesting a dropdown in another dropdown. Any help to clear up what I'm missing here would be greatly appreciated!

           <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                    <button class="dropdown-item" type="button">Action</button>
                    <button class="dropdown-item" type="button">Another action</button>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown2
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <button class="dropdown-item" type="button">Action</button>
                            <button class="dropdown-item" type="button">Another action</button>
                            <button class="dropdown-item" type="button">Something else here</button>
                        </div>
                    </div>
                </div>
            </div>

[mdo]

Converted this to a discussion as this is a how-to question outside the core Bootstrap project.

[androidrhodium]

Thanks! I wasn't sure if this was a how too or issue. I could just be miss understanding the expected behavior between the Dash Bootsrap library and the raw HTML markup for bootstrap.