ed Navbar v1.0 – Customisable Multi-Level Vertical jQuery Navbar for Bootstrap 4

ed Navbar is a vertical jQuery navbar, which extends Bootstrap 4 for vertical navbar layout and supports multiple sub-levels. It is highly customisable, mobile ready and works with local and external links. ed Navbar is designed with Bootstrap 4 in mind and would adopt any Bootstrap 4 design by default.

A) CSS/SCSS Files and Structure

Index file showcasing ed Navbar v1.0.

  1. index.html

There are three css files included – css/ed-navbar.css includes Bootstrap’s default styles as well as all styles associated with ed Navbar v1.0 (at the end). There is one .css.map file included – ed-navbar.css.map. File ed-navbar.css within the css directory is the output file of the main scss file ed-navbar.scss within the scss directory and extends Bootstrap’s default theme for a customisable vertical navbar layout. Bootstrap 4.1.3 scss files are included in the bootstrap_scss directory.

File ed-navbar.scss includes multiple SCSS variables to allow for an easy customisation of the navbar. The color and background color of classes .nav-link, .download-item and .navbar-brand are customisable as is the background color of the .navbar class. Spacing options are included too.

  1. css/ed-navbar.css
  2. css/ed-navbar.css.map
  3. scss/ed-navbar.scss
  4. scss/bootstrap_scss – directory containing a non-modified copy of Bootstrap 4.1.3 scss files

The node_modules directory contains npm dependencies – Bootstrap 4.1.3 , jQuery 3.3.1, Popper.js 1.0.2 and Tooltip.js 1.2.0. An npm package file in included too – package.json.

  1. package.json – npm package file
  2. node_modules – directory of npm dependencies (Bootstrap 4.1.3 , jQuery 3.3.1, Popper.js 1.0.2 and Tooltip.js 1.2.0)

B) JavaScript

There is one js file that includes the necessary code for ed Navbar – ed-navbar.js. Bootstrap 4.1.3 JS (bootstrap.min.js), jQuery 3.3.1 (jquery.min.js) and Popper 1.0.2 (popper.min.js) are included too.

  1. js/ed-navbar.js
  2. js/bootstrap.min.js
  3. js/jquery.min.js
  4. js/popper.min.js

C) Help & Resources

ed Navbar is designed specifically for Bootstrap 4-based templates and extends Bootstrap 4 for a vertical navbar layout. For additional resources on Bootstrap theming please refer to Bootstrap 4 Theming Documentation. For help on SASS, refer to the SASS guide below.