Design a Responsive Side Menu for Bootstrap 4

Snippet jQuery Bootstrap CSS

Last updated Feb 16, 2016

One of the most annoying limitations of Bootstrap is its mobile navbar. It would be nice if a responsive off-canvas mobile side menu was built into the the navbar component, but it doesn’t look like this will be the case anytime soon.

In this lesson, we are going to build a responsive side menu feels more like something you would seen in an iOS or Android app. The goal is to create a side navigation that looks great on any device and can be easily dropped into your bootstrap project.

Lesson Checkpoints

1. Setting up the HTML

First, let’s set up the basic Bootstrap 4 Navbar with some dummy content.

homepage.html


 <nav class="navbar navbar-light navbar-static bg-faded" role="navigation">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <!-- insert more nav-items if you so choose -->
    <button class="navbar-toggler pull-xs-right" id="navbarSideButton" type="button">
      &#9776;
    </button>
  </ul>
    <!-- navbar-side will go here -->
</nav>

Next, we will drop in the side navbar just before the closing nav tag. Notice we added some new classes that we will define in our CSS in the next checkpoint.


 <ul class="navbar-side" id="navbarSide">
  <li class="navbar-side-item">
    <a href="#" class="side-link">Signup</a>
  </li>
  <!-- insert more side-items if you so choose -->
</ul>

basic navbar on bootstrap 4

2. CSS (SCSS) for the Off Canvas Side Menu

Now we need to define the styles for navbar-side and navbar-side-item custom classes we defined above. In this lesson, we will stick to the convention of using rem for sizing as opposed to pixels, which is one of the major changes in BS4. If using BS3, you will need to tweak the rem values back to pixels.

This style will give us our initial menu container. It is currently in the open state, but this will updated in the next step using CSS animations.

navbar-side.scss


.navbar-side {
  height: 100%;
  width: 25%;
  position: fixed;
  top: 0;
  right: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid #ccc;
  background-color: #f7f7f9;
  overflow-y: scroll;
  z-index: 1000;
}

Next, let’s add some basic style to our the classes attached to the the list items and links. These two classes will be where you want to add your own creative CSS styles and flavors.


 .navbar-side-item {
  padding: 1.5rem 0;
  margin: 0;
  border-bottom: 2px solid #ccc;
  height: 5rem;
}

.side-link {
  padding-left: 2rem;
}

side menu open bootstrap 4

3. Opening the Menu Gracefully with CSS Animations and JavaScript

We are using the CSS property ‘transform’ with a translateX value of 100% to push the menu on the x-axis. In addition, we are using the ‘transition’ property with a 300ms ease to make the menu open with a swift and graceful animation. 


 .navbar-side {
    // other code omitted
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: 300ms ease;
  transition: 300ms ease;
}

Next, we need to toggle this state by adding an additional class when the Navbar button is clicked. Let’s call this class reveal. 


 .reveal {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  -webkit-transition: 300ms ease;
  transition: 300ms ease;
}

Now we simply add this class when the menu is clicked with jQuery. Note: You could achieve this by using Bootstrap’s built in collapse plugin, but I feel this actually makes things more complicated, so here’s a new JavaScript (jQuery) function from scratch. 


 $( document ).ready(function() {
  $('#navbarSideButton').on('click', function() {
    $('#navbarSide’).addClass('reveal');
  });
});

4. Closing the Menu Gracefully with an Overlay and JavaScript

A nice touch we can add to the mobile side menu is an overlay that pops up when the menu is active - eliminating any other distractions on the screen. When visitors clicks or touches the overlay, the menu will animate back to its hidden off-canvas position. 

First, we need add an extra div to our HTML before the closing nav tag. 


<nav class="navbar navbar-light navbar-static bg-faded”>
<!-- other navbar code omitted -->
<div class="overlay"></div>
</nav>

Second, lets add some style to it. 


.overlay {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background-color: #ccc;
  opacity: 0.6;
  z-index: 990;
}

Lastly, lets add to our JavaScript to toggle its visibility and hide the side navbar when the overlay is clicked or touched. 


$( document ).ready(function() {

  // Open navbarSide when button is clicked
  $('#navbarSideButton').on('click', function() {
    $('#navbarSide').addClass('reveal');
    $('.overlay').show();
  });

  // Close navbarSide when the outside of menu is clicked
  $('.overlay').on('click', function(){
    $('#navbarSide').removeClass('reveal');
    $('.overlay').hide();
  });

});

 

5. Making the Menu Look Awesome on All Devices

The width of the menu is currently set at 25%, which is not going to work on small or medium screens. We are going to use the new media query mixins in Bootstrap 4 to change the menu width based on viewport size.


.navbar-side {
	// other code omitted
  @include media-breakpoint-up(xs) { width: 85%; } // Small
  @include media-breakpoint-up(sm) { width: 50%; } // Medium
  @include media-breakpoint-up(md) { width: 25%; } // Large
}

That's it! Hopefully this lesson helped you create an awesome responsive menu for your bootstrap 4 app. 

Comments