Bootstrap 4：多級下拉菜單內部導航

Question

在 Bootstrap 4 中制作多級下拉菜單的最簡單方法是什么？ 我設法在 SO 上找到的所有示例要么太混亂，要么未包含在導航中。

我試過將下拉菜單放在下拉菜單中，但這似乎不起作用。 有人可以幫我解決這個問題嗎？

這是我的代碼的基本大綱：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </nav>

Answer 1

我使用以下 CSS 和 JavaScript。 它使用一個額外的類dropdown-submenu 。 我用 Bootstrap 4 beta 測試了它。

它支持多級子菜單。

 $('.dropdown-menu a.dropdown-toggle').on('click', function(e) { if (!$(this).next().hasClass('show')) { $(this).parents('.dropdown-menu').first().find('.show').removeClass('show'); } var $subMenu = $(this).next('.dropdown-menu'); $subMenu.toggleClass('show'); $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) { $('.dropdown-submenu .show').removeClass('show'); }); return false; });

 .dropdown-submenu { position: relative; } .dropdown-submenu a::after { transform: rotate(-90deg); position: absolute; right: 6px; top: .8em; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-left: .1rem; margin-right: .1rem; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Submenu</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Submenu action</a></li> <li><a class="dropdown-item" href="#">Another submenu action</a></li> <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Subsubmenu action</a></li> <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li> </ul> </li> <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Subsubmenu action</a></li> <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </nav>

Answer 2

以下是基於 bootstrap4 的 MultiLevel 下拉菜單。 我是根據 bootstrap4 基本下拉菜單嘗試的。

 .dropdown-submenu{ position: relative; } .dropdown-submenu a::after{ transform: rotate(-90deg); position: absolute; right: 3px; top: 40%; } .dropdown-submenu:hover .dropdown-menu, .dropdown-submenu:focus .dropdown-menu{ display: flex; flex-direction: column; position: absolute !important; margin-top: -30px; left: 100%; } @media (max-width: 992px) { .dropdown-menu{ width: 50%; } .dropdown-menu .dropdown-submenu{ width: auto; } }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Something else here</a> <ul class="dropdown-menu"> <a class="dropdown-item" href="#">A</a> <a class="dropdown-item" href="#">b</a> </ul> </li> </ul> </li> </ul> </div> </nav>

Answer 3

2018 年更新

這是Bootstrap 4.1 Navbar 的另一個變體，帶有多級下拉菜單。 這個子菜單使用最少的 CSS，並且可以根據需要重新定位：

https://www.codeply.com/go/nG6iMAmI2X

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

jQuery 控制子菜單的顯示：

$('.dropdown-submenu > a').on("click", function(e) {
    var submenu = $(this);
    $('.dropdown-submenu .dropdown-menu').removeClass('show');
    submenu.next('.dropdown-menu').addClass('show');
    e.stopPropagation();
});

$('.dropdown').on("hidden.bs.dropdown", function() {
    // hide any open menus when parent closes
    $('.dropdown-menu.show').removeClass('show');
});

---

請參閱此答案以在懸停時激活Bootstrap 4 子菜單

Answer 4

我發現這個多下拉菜單適用於所有設備。

另外，有懸停風格

它支持帶有 bootstrap 4 的多級子菜單。

 $( document ).ready( function () { $( '.navbar a.dropdown-toggle' ).on( 'click', function ( e ) { var $el = $( this ); var $parent = $( this ).offsetParent( ".dropdown-menu" ); $( this ).parent( "li" ).toggleClass( 'show' ); if ( !$parent.parent().hasClass( 'navbar-nav' ) ) { $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } ); } $( '.navbar-nav li.show' ).not( $( this ).parents( "li" ) ).removeClass( "show" ); return false; } ); } );

 .navbar-light .navbar-nav .nav-link { color: rgb(64, 64, 64); } .btco-menu li > a { padding: 10px 15px; color: #000; } .btco-menu .active a:focus, .btco-menu li a:focus , .navbar > .show > a:focus{ background: transparent; outline: 0; } .dropdown-menu .show > .dropdown-toggle::after{ transform: rotate(-90deg); }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <nav class="navbar navbar-toggleable-md navbar-light bg-faded btco-menu"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a> <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item dropdown-toggle" href="#">Submenu</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Submenu action</a></li> <li><a class="dropdown-item" href="#">Another submenu action</a></li> <li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Subsubmenu action</a></li> <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li> </ul> </li> <li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Subsubmenu action</a></li> <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </nav>

Answer 5

這個適用於Bootstrap 4.3.1 。

jsfiddle： https ://jsfiddle.net/ko6L31w4/1/

HTML 代碼可能有點亂，因為我為綜合測試創建了一個稍微復雜的下拉菜單，否則一切都非常簡單。

Js 包含的折疊打開的下拉列表的方法較少，而 CSS 僅包含完整功能的最小樣式。

 $(function() { $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) { event.preventDefault(); event.stopPropagation(); //method 1: remove show from sibilings and their children under your first parent /* if (!$(this).next().hasClass('show')) { $(this).parents('.dropdown-menu').first().find('.show').removeClass('show'); } */ //method 2: remove show from all siblings of all your parents $(this).parents('.dropdown-submenu').siblings().find('.show').removeClass("show"); $(this).siblings().toggleClass("show"); //collapse all after nav is closed $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) { $('.dropdown-submenu .show').removeClass("show"); }); }); });

 .dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-md navbar-light bg-white py-3 shadow-sm"> <div class="container-fluid"> <a href="#" class="navbar-brand font-weight-bold">Multilevel Dropdown</a> <button type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"> <span class="navbar-toggler-icon"></span> </button> <div id="navbarContent" class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <!-- nav dropdown --> <li class="nav-item dropdown"> <a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">Dropdown</a> <ul class="dropdown-menu"> <li><a href="#" class="dropdown-item">Some action</a></li> <!-- lvl 1 dropdown --> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 1</a> <ul class="dropdown-menu"> <li><a href="#" class="dropdown-item">level 2</a></li> <!-- lvl 2 dropdown --> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 2</a> <ul class="dropdown-menu"> <li><a href="#" class="dropdown-item">level 3</a></li> <!-- lvl 3 dropdown --> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 3</a> <ul class="dropdown-menu"> <li><a href="#" class="dropdown-item">level 4</a></li> </ul> </li> </ul> </li> <li><a href="#" class="dropdown-item">level 2</a></li> <li><a href="#" class="dropdown-item">level 2</a></li> </ul> </li> <li><a href="#" class="dropdown-item">Some other action</a></li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 1</a> <ul class="dropdown-menu"> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 2</a> <ul class="dropdown-menu"> <li><a href="#" class="dropdown-item">level 3</a></li> <li><a href="#" class="dropdown-item">level 3</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 2</a> <ul class="dropdown-menu"> <li><a href="#" class="dropdown-item">level 3</a></li> <li><a href="#" class="dropdown-item">level 3</a></li> </ul> </li> <li><a href="#" class="dropdown-item">level 2</a></li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 2</a> <ul class="dropdown-menu"> <li><a href="#" class="dropdown-item">level 3</a></li> <li><a href="#" class="dropdown-item">level 3</a></li> </ul> </li> <li><a href="#" class="dropdown-item">level 2</a></li> </ul> </li> </ul> </li> <li class="nav-item"><a href="#" class="nav-link">About</a></li> <li class="nav-item"><a href="#" class="nav-link">Services</a></li> <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> </ul> </div> </div> </nav>

Answer 6

使用官方 HTML 而不添加額外的 CSS 樣式和類，就像原生支持一樣。

只需添加以下代碼：

$.fn.dropdown = (function() {
    var $bsDropdown = $.fn.dropdown;
    return function(config) {
        if (typeof config === 'string' && config === 'toggle') { // dropdown toggle trigged
            $('.has-child-dropdown-show').removeClass('has-child-dropdown-show');
            $(this).closest('.dropdown').parents('.dropdown').addClass('has-child-dropdown-show');
        }
        var ret = $bsDropdown.call($(this), config);
        $(this).off('click.bs.dropdown'); // Turn off dropdown.js click event, it will call 'this.toggle()' internal
        return ret;
    }
})();

$(function() {
    $('.dropdown [data-toggle="dropdown"]').on('click', function(e) {
        $(this).dropdown('toggle');
        e.stopPropagation();
    });
    $('.dropdown').on('hide.bs.dropdown', function(e) {
        if ($(this).is('.has-child-dropdown-show')) {
            $(this).removeClass('has-child-dropdown-show');
            e.preventDefault();
        }
        e.stopPropagation();
    });
});

引導程序的下拉菜單可以輕松更改為無限級別。 很遺憾他們沒有這樣做。

順便說一句，懸停版本： https : //github.com/dallaslu/bootstrap-4-multi-level-dropdown

這是一個完美的演示： https ://jsfiddle.net/dallaslu/adky6jvs/（適用於 Bootstrap v4.4.1）

Answer 7

有一種更簡單的方法可以做到這一點。 我正在使用 bootstrap 5，但我認為它也適用於 bootstrap 4。您必須使用“btn-group”class 而不是“nav-item”class。而且您不必在 jquery 中編寫任何代碼或創建類。 . 檢查這個片段。

重要提示：整頁看起來更好！

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <body> <nav class="navbar navbar-expand-xl navbar-dark bg-primary bg-gradient"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="btn-group"> <div class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"> Clickable inside </div> <ul class="dropdown-menu"> <li> <div class="btn-group dropend"> <button class="dropdown-item dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"> Clickable inside </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> </ul> </div> </li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> </ul> </li> <li class="btn-group"> <div class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"> Clickable inside </div> <ul class="dropdown-menu"> <li> <div class="btn-group dropend"> <button class="dropdown-item dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"> Clickable inside </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> </ul> </div> </li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> </ul> </li> </ul> </div> </div> </nav> </body>