Zero config advanced Bootstrap navbars with SmartMenus jQuery and the SmartMenus jQuery Bootstrap 4 Addon.
You just need to include the JS/CSS files on your Bootstrap 4 powered pages and everything should work automatically including full support for your Bootstrap 4 theme. And you also have the power and flexibility of SmartMenus jQuery at hand should you need to tweak or customize anything.
In addition to Bootstrap's CSS just include the SmartMenus jQuery Bootstrap 4 Addon CSS. It's just static CSS code you don't need to edit at all (and probably shouldn't try to).
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- SmartMenus jQuery Bootstrap 4 Addon CSS -->
<link href="../addons/bootstrap-4/jquery.smartmenus.bootstrap-4.css" rel="stylesheet">
Note: Bootstrap 4 normally uses <div> elements as .dropdown-menu containers. But since we are building a multi-level menu tree, we need to replace them with nested <ul>/<li> elements.
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<!-- Left nav -->
<ul class="nav navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item disabled" href="#">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li class="dropdown-divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">One more separated link</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">A long sub menu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><a class="dropdown-item" href="#">One more link</a></li>
<li><a class="dropdown-item" href="#">Menu item 1</a></li>
<li><a class="dropdown-item" href="#">Menu item 2</a></li>
<li><a class="dropdown-item" href="#">Menu item 3</a></li>
<li><a class="dropdown-item" href="#">Menu item 4</a></li>
<li><a class="dropdown-item" href="#">Menu item 5</a></li>
<li><a class="dropdown-item" href="#">Menu item 6</a></li>
<li><a class="dropdown-item" href="#">Menu item 7</a></li>
<li><a class="dropdown-item" href="#">Menu item 8</a></li>
<li><a class="dropdown-item" href="#">Menu item 9</a></li>
<li><a class="dropdown-item" href="#">Menu item 10</a></li>
<li><a class="dropdown-item" href="#">Menu item 11</a></li>
<li><a class="dropdown-item" href="#">Menu item 12</a></li>
<li><a class="dropdown-item" href="#">Menu item 13</a></li>
<li><a class="dropdown-item" href="#">Menu item 14</a></li>
<li><a class="dropdown-item" href="#">Menu item 15</a></li>
<li><a class="dropdown-item" href="#">Menu item 16</a></li>
<li><a class="dropdown-item" href="#">Menu item 17</a></li>
<li><a class="dropdown-item" href="#">Menu item 18</a></li>
<li><a class="dropdown-item" href="#">Menu item 19</a></li>
<li><a class="dropdown-item" href="#">Menu item 20</a></li>
<li><a class="dropdown-item" href="#">Menu item 21</a></li>
<li><a class="dropdown-item" href="#">Menu item 22</a></li>
<li><a class="dropdown-item" href="#">Menu item 23</a></li>
<li><a class="dropdown-item" href="#">Menu item 24</a></li>
<li><a class="dropdown-item" href="#">Menu item 25</a></li>
<li><a class="dropdown-item" href="#">Menu item 26</a></li>
<li><a class="dropdown-item" href="#">Menu item 27</a></li>
<li><a class="dropdown-item" href="#">Menu item 28</a></li>
<li><a class="dropdown-item" href="#">Menu item 29</a></li>
<li><a class="dropdown-item" href="#">Menu item 30</a></li>
<li><a class="dropdown-item" href="#">Menu item 31</a></li>
<li><a class="dropdown-item" href="#">Menu item 32</a></li>
<li><a class="dropdown-item" href="#">Menu item 33</a></li>
<li><a class="dropdown-item" href="#">Menu item 34</a></li>
<li><a class="dropdown-item" href="#">Menu item 35</a></li>
<li><a class="dropdown-item" href="#">Menu item 36</a></li>
<li><a class="dropdown-item" href="#">Menu item 37</a></li>
<li><a class="dropdown-item" href="#">Menu item 38</a></li>
<li><a class="dropdown-item" href="#">Menu item 39</a></li>
<li><a class="dropdown-item" href="#">Menu item 40</a></li>
<li><a class="dropdown-item" href="#">Menu item 41</a></li>
<li><a class="dropdown-item" href="#">Menu item 42</a></li>
<li><a class="dropdown-item" href="#">Menu item 43</a></li>
<li><a class="dropdown-item" href="#">Menu item 44</a></li>
<li><a class="dropdown-item" href="#">Menu item 45</a></li>
<li><a class="dropdown-item" href="#">Menu item 46</a></li>
<li><a class="dropdown-item" href="#">Menu item 47</a></li>
<li><a class="dropdown-item" href="#">Menu item 48</a></li>
<li><a class="dropdown-item" href="#">Menu item 49</a></li>
<li><a class="dropdown-item" href="#">Menu item 50</a></li>
<li><a class="dropdown-item" href="#">Menu item 51</a></li>
<li><a class="dropdown-item" href="#">Menu item 52</a></li>
<li><a class="dropdown-item" href="#">Menu item 53</a></li>
<li><a class="dropdown-item" href="#">Menu item 54</a></li>
<li><a class="dropdown-item" href="#">Menu item 55</a></li>
<li><a class="dropdown-item" href="#">Menu item 56</a></li>
<li><a class="dropdown-item" href="#">Menu item 57</a></li>
<li><a class="dropdown-item" href="#">Menu item 58</a></li>
<li><a class="dropdown-item" href="#">Menu item 59</a></li>
<li><a class="dropdown-item" href="#">Menu item 60</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Another link</a></li>
<li><a class="dropdown-item" href="#">One more link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- Right nav -->
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="bootstrap-4-navbar.html">Default</a></li>
<li class="nav-item active"><a class="nav-link" href="bootstrap-4-navbar-static-top.html">Static top</a></li>
<li class="nav-item"><a class="nav-link" href="bootstrap-4-navbar-fixed-top.html">Fixed top</a></li>
<li class="nav-item"><a class="nav-link" href="bootstrap-4-navbar-fixed-bottom.html">Fixed bottom</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li class="dropdown-divider"></li>
<li class="dropdown-header">Nav header</li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">A sub menu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><a class="dropdown-item disabled" href="#">Disabled item</a></li>
<li><a class="dropdown-item" href="#">One more link</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">A separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
In addition to Bootstrap's JavaScript just include SmartMenus jQuery and the SmartMenus jQuery Bootstrap 4 Addon. The default options used in jquery.smartmenus.bootstrap.js should work well for all. However, you can, of course, tweak them if you like.
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery Bootstrap 4 Addon -->
<script type="text/javascript" src="../addons/bootstrap-4/jquery.smartmenus.bootstrap-4.js"></script>
data-* attributesThe Bootstrap 4 addon introduces the following additional data-* attributes which can be set to any .navbar-nav:
data-sm-skip - this will tell the script to skip this navbar and not apply any SmartMenus features to it so it will behave like a regular Bootstrap navbar.data-sm-skip-collapsible-behavior - this will tell the script to not apply SmartMenus' specific behavior to this navbar in collapsible mode (mobile view). Bootstrap's behavior for navbars in collapsible mode is to use the whole area of the parent items just as a toggle button for their sub menus and thus it's impossible to set a link to the parent items that can be followed on click/tap. SmartMenus' behavior is to add a separate +/- sub menus toggle button to parent items and thus allows the link of the parent items to be activated on the second click/tap (the first click/tap displays the sub menu if it's not visible). If you need even further control, you can check the collapsibleBehavior SmartMenus option which can be set in a data-sm-options attribute.The following additional option can be set in a data-sm-options attribute:
bootstrapHighlightClasses: 'text-dark bg-light' - CSS class(es) for highlighting expanded parent dropdown items.Check the docs for a complete list of all the available SmartMenus options.
The following methods are available:
jQuery.SmartMenus.Bootstrap.init() - reinit the addon. Useful if you add any navbars dynamically on your page and need to init them at any time (all navbars are normally initialized ondomready).