You basically just need to include the JS/CSS files on your Bootstrap 3 powered pages and everything should work automatically including full support for whatever Bootstrap theme you already use. And, of course, you still have the full 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 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 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<!-- SmartMenus jQuery Bootstrap Addon CSS -->
<link href="../addons/bootstrap/jquery.smartmenus.bootstrap.css" rel="stylesheet">

HTML

<!-- Navbar static top -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
  
      <!-- Left nav -->
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">A long sub menu <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="disabled"><a class="disabled" href="#">Disabled item</a></li>
                    <li><a href="#">One more link</a></li>
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>
                    <li><a href="#">Menu item 4</a></li>
                    <li><a href="#">Menu item 5</a></li>
                    <li><a href="#">Menu item 6</a></li>
                    <li><a href="#">Menu item 7</a></li>
                    <li><a href="#">Menu item 8</a></li>
                    <li><a href="#">Menu item 9</a></li>
                    <li><a href="#">Menu item 10</a></li>
                    <li><a href="#">Menu item 11</a></li>
                    <li><a href="#">Menu item 12</a></li>
                    <li><a href="#">Menu item 13</a></li>
                    <li><a href="#">Menu item 14</a></li>
                    <li><a href="#">Menu item 15</a></li>
                    <li><a href="#">Menu item 16</a></li>
                    <li><a href="#">Menu item 17</a></li>
                    <li><a href="#">Menu item 18</a></li>
                    <li><a href="#">Menu item 19</a></li>
                    <li><a href="#">Menu item 20</a></li>
                    <li><a href="#">Menu item 21</a></li>
                    <li><a href="#">Menu item 22</a></li>
                    <li><a href="#">Menu item 23</a></li>
                    <li><a href="#">Menu item 24</a></li>
                    <li><a href="#">Menu item 25</a></li>
                    <li><a href="#">Menu item 26</a></li>
                    <li><a href="#">Menu item 27</a></li>
                    <li><a href="#">Menu item 28</a></li>
                    <li><a href="#">Menu item 29</a></li>
                    <li><a href="#">Menu item 30</a></li>
                    <li><a href="#">Menu item 31</a></li>
                    <li><a href="#">Menu item 32</a></li>
                    <li><a href="#">Menu item 33</a></li>
                    <li><a href="#">Menu item 34</a></li>
                    <li><a href="#">Menu item 35</a></li>
                    <li><a href="#">Menu item 36</a></li>
                    <li><a href="#">Menu item 37</a></li>
                    <li><a href="#">Menu item 38</a></li>
                    <li><a href="#">Menu item 39</a></li>
                    <li><a href="#">Menu item 40</a></li>
                    <li><a href="#">Menu item 41</a></li>
                    <li><a href="#">Menu item 42</a></li>
                    <li><a href="#">Menu item 43</a></li>
                    <li><a href="#">Menu item 44</a></li>
                    <li><a href="#">Menu item 45</a></li>
                    <li><a href="#">Menu item 46</a></li>
                    <li><a href="#">Menu item 47</a></li>
                    <li><a href="#">Menu item 48</a></li>
                    <li><a href="#">Menu item 49</a></li>
                    <li><a href="#">Menu item 50</a></li>
                    <li><a href="#">Menu item 51</a></li>
                    <li><a href="#">Menu item 52</a></li>
                    <li><a href="#">Menu item 53</a></li>
                    <li><a href="#">Menu item 54</a></li>
                    <li><a href="#">Menu item 55</a></li>
                    <li><a href="#">Menu item 56</a></li>
                    <li><a href="#">Menu item 57</a></li>
                    <li><a href="#">Menu item 58</a></li>
                    <li><a href="#">Menu item 59</a></li>
                    <li><a href="#">Menu item 60</a></li>
                  </ul>
                </li>
                <li><a href="#">Another link</a></li>
                <li><a href="#">One more link</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
  
      <!-- Right nav -->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="bootstrap-navbar.html">Default</a></li>
        <li class="active"><a href="bootstrap-navbar-static-top.html">Static top</a></li>
        <li><a href="bootstrap-navbar-fixed-top.html">Fixed top</a></li>
        <li><a href="bootstrap-navbar-fixed-bottom.html">Fixed bottom</a></li>
        <li><a href="#">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">A sub menu <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="disabled"><a class="disabled" href="#">Disabled item</a></li>
                <li><a href="#">One more link</a></li>
              </ul>
            </li>
            <li><a href="#">A separated link</a></li>
          </ul>
        </li>
      </ul>
  
    </div><!--/.nav-collapse -->
  </div><!--/.container -->
</div>

JavaScript

In addition to Bootstrap's JavaScript just include SmartMenus jQuery and the SmartMenus jQuery Bootstrap 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.

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery Bootstrap Addon -->
<script type="text/javascript" src="../addons/bootstrap/jquery.smartmenus.bootstrap.js"></script>

Quick customization

data-* attributes

The following data-* attributes can be set to any ul.navbar-nav:

API

The following methods are available: