Awesome Open Source
Awesome Open Source


Bsnav adds features to the Bootstrap 4 navbar element.

See the demo


How to use it

To start using it, include the css and js files.

Just add a link to the css file in your <head>:

<link rel="stylesheet" type="text/css" href="[email protected]/dist/bsnav.min.css">

Then, before your closing <body> tag add:

<script src="[email protected]/dist/bsnav.min.js"></script>

  Where you want to show the menu, you must include the following code:

<div class="navbar navbar-expand-lg bsnav bsnav-light">

  <a class="navbar-brand" href="#">bsnav</a>

  <button class="navbar-toggler toggler-spring"><span class="navbar-toggler-icon"></span></button>

  <div class="collapse navbar-collapse justify-content-md-end">
    <ul class="navbar-nav navbar-mobile mr-0">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Gallery</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>

In the demo you can find other styles for navabars.  

Mobile navbar

Bsnav includes a mobile sidebar menu. To work, you must include the following html code before closing the <body> tag, then, the bsnav javascript will be responsible for cloning the menu to use it for mobile versions.

<div class="bsnav-mobile">
  <div class="bsnav-mobile-overlay"></div>
  <div class="navbar"></div>



PLEASE review prior to requesting a feature, filing a pull request or filing an issue.



Honestly, I do not speak English very well. If you are interested in helping me improve this documentation you are welcome. And if you want to translate the documentation into other languages even better. ** Bsnav ** is open source and we do it together. ;)

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Css (217,506
Bootstrap4 (4,515
Navigation (1,579
Pug (1,496
Menu (834
Navigationbar (155
Related Projects