SmartMenus Bootstrap 4 Addon (Navbar static top)

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.

Source Code

CSS

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">

HTML

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>

JavaScript

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>

Quick customization

data-* attributes

The Bootstrap 4 addon introduces the following additional data-* attributes which can be set to any .navbar-nav:

Options

The following additional option can be set in a data-sm-options attribute:

Check the docs for a complete list of all the available SmartMenus options.

API

The following methods are available: