Bootstrap Menu

Demo Highlights

• This demo features a special Navbar CSS layout, it doesn't use its wrapper or markup, as we'll see in a minute, but the full Bootstrap 4 / 5 original Navbar markup and the initialization target is the <ul class="navbar-nav"> element.
• The idea of this demo is to showcase how to integrate Navbar with Bootstrap while keeping the original design concept of Bootstrap. Basically the CSS applies to the submenu and its animations, submenu items and menu icons.
• We've enabled the toggleSiblings option via the specific attribute data-toggle-siblings="true".
• Also for this demo we've set the responsive breakpoint to 768px, via navbar-expand-md class on the Bootstrap side, which is also the default for Navbar, but that's up to you to adjust for your need.
• For this demo we've developed dedicated SCSS mixins where most of the variables are ignored.

Bootstrap Navbar Wrapper

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-wrapper">
    <span class="navbar-toggler-icon"></span>
  </button>
      
  <div id="navbar-wrapper" class="navbar-collapse collapse">
    <ul class="navbar-nav me-auto" data-function="navbar" data-breakpoint="768" data-toggle-siblings="true">
      <li class="nav-item"><a class="nav-link" href="#">Root Menu Item</a></li>
      <li class="nav-item active">
        <a class="nav-link" href="#">
          Parent Menu Item
          <i class="parent-icon"></i>
        </a>
        <button class="subnav-toggle">
          <i class="menu-icon"/>
        </button>        
        <ul class="subnav">
          <li class="nav-item active"><a class="nav-link" href="#">Submenu Item 1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Submenu Item 2</a></li>
        </ul>
      </li>
    </ul>
    <span class="navbar-text">
      <a href="#">Some link</a> and other text.
    </span>
  </div>
</nav>

As you can see we're using the original plugin markup and functionality with the collapsible element, as well as the .navbar-nav class for the menu itself, the .nav-item and .nav-link classes for menu items and .navbar-text class for other contents.

Bootstrap Menu Mixins

// navbar-bootstrap.scss - mixins
@import 'variables','mixins','mixins-bs','root';

@include navbar-style-bs;
@include nav-layout-bs;
@include main-menu-bs;

• for this build we're using the dedicated mixins set from the mixins-bs.scss file;
• the navbar-style-bs applies menu items text color and submenu background color for both .navbar-dark (this very example) and .navbar-light;
• nav-layout-bs applies the submenu layout;
• main-menu-bs sets the position of submenu and animations according to the layout.

Used CSS Variables

// bootstrap.html - custom CSS variable values
.navbar {
  --n-padding-x: 1rem;
  --n-padding-y: .5rem;
  --n-subnav-padding-x: .5rem;
  --n-subnav-padding-y: .5rem;
}

• since the markup is the original Bootstrap Navbar markup, we only added some spacing;
• everything else should match the original Bootstrap Navbar design.

More Demos

This is the reason for this implementation, the large amount of flexibility and utilities from Bootstrap, the functionality and additions from Navbar. There is another demo we've set up, a demo in which we're using Navbar with the full markup and styling, something that might look like an extended version of the original Bootstrap component.

A quick note on the usage of mega menu: the Bootstrap grid also allows you to set a breakpoint for your columns, so make sure to double check the Navbar options.breakpoint, SCSS $responsive-breakpoint and your column col-BREAKPOINT-3 class.