Navbar component which depends on
So here I described how can you save page size by opting necessary files only to perform a few behaviors using their jQuery Plugin.
Also read: create Mega Menu in Bootstrap 4.
As I said, I had to use only
- Popper JS
Why these Bootstrap Plugins?
Well, the answer is in Bootstrap. As expected jQuery must be included first, nothing strange. Just from the documentation:
While we use jQuery’s slim build in our docs, the full version is also supported.
In short if you don’t need AJAX and some effects/animations, you can include less sized slim build else include full version of jQuery.
Also I’m writing this article when Beta 4.0 version of Bootstrap was out. So at this time
collapse-js is the main plugin to toggle menu and
util-js includes utility functions and a basic helper for
transitionEnd events as well as a CSS transition emulator. It’s used by the other plugins to check for CSS transition support and to catch hanging transitions.
util-js and it has to be included alongside the other JS files. While using compiled or minified
bootstrap.js, there is no need to include this. But in individual case, now it’s required to include before any other JS plugin and after jQuery.
So finally you would need to identify which plugin file you need along with it’s dependency. You would need to download source files to include plugin separately. There, you can find all individual plugins under
js > dist folder. My final code would look like:
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!--Popper JS (as per version 4.0 Beta)-->
<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>