Create Cool Simple Sidebar Menu with Bootstrap 3 and Font Awesome

Inspired by the bootstrap sidebar menu from, I create a cool simple sidebar menu using bootstrap 3 and font awesome framework.

create simple sidebar menu bootstrap

Simple sidebar menu / vertical dropdown menu was adopted from example simple sidebar from , i just modify to be more cool. The advantages from this sidebar, when the screen size equal to 768px and toggle button is clicked, the sidebar will be hidden and will only display the menus icon.

To beautify the icon in my bootstrap sidebar menu, i use the font awesome icon framework in order to the sidebar menu look more attractive .

View my bootstrap left sidebar menu as shown below

Create vertical dropdown bootstrap menu how to create sidebar dropdown with bootstrap

Let’s start creating left sidebar menu with boostrap 3. Initial preparation:

1. Make sure you have downloaded the boostrap 3 framework here

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Bootstrap is a framework for building responsive web design. Which means that the web interface created by bootstrapping will adjust the screen size of the browser we use both in desktop, tablet or mobile device. This feature can be enabled or disabled according to our own desires. By bootstrapping we also can build dynamic or static web.

2. Download the font awesome css to beautify the appearance of the icon here

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS “font awesome”.
Font awesome is a font web formed several icons for web interface, commonly used for Bootstrap, there are more than 100+ icons in Font awesome and will increase each its release.

3. Download Jquery-1.11.2.min.js here

4. Simple sidebar menu original file from I just change some css file from simple sidebar menu from and add new javascript

Create css file as simple-sidebar.css and enter the following code

Create a javascript file as sidebar_menu.js and enter the following code

Create index html and copy the following code

Finish!! Perhaps the sidebar is not yet perfect. But it could be a tutorial / ideas to create bootstrap sidebar nicer than mine. Simply modify sidebar menu accordance with your wishes. You can see my another bootstrap tutorial here

For demo ” cool simple sidebar menu bootstrap 3 by seegatesite ” or you can download script below

Last update script  :

  • 9/9/2015 – fixed bug.

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.


 Add your comment
  1. Thanks you 🙂


    thank you

  3. Jose Rafael Camejo

    Muchas gracias! Thank you very much! 🙂

  4. Thank’s exactly what I needed

  5. Thanks you very much! I’m tweaking it for my RTL needs right now.
    Although I’m trying to get over a little bug – try changing font size to 16px and watch the li items getting indented increasingly…

  6. Thank You…..Works Great 🙂

  7. the main content is not responsive, responsive feature not working… text width area still on fixed width

  8. Hello,

    Is it possible to do the same thing but to have the sidebar on the left and right side ?

  9. When you toggle the sidebar to only show the icons, the page content does not expand. I have tried a few things, but I am not able to figure out how to get the page content wrapper to expand to the page when you toggle the sidebar. Can you think of a solution?

    E.g. If you toggle the sidebar in a desktop media, you will see the content does not expand, it just moves left.

  10. I am not sure where my previous comment went, but it stated a bug where the page content wrapper does not expand when the sidebar is toggled to the left. You will notice when you hit the toggle button, the content just moves to the left but its container is not expanded. Any fix for this?

  11. Hello. how to change the color of the side bar? thank you so much

  12. Hi there, everything is going well here and ofcourse every one is
    sharing information, that’s really good, keep up writing.

  13. And why I can’t use the latest jquery ?
    I have tried to change from script src=”js/jquery-1.11.2.min.js” to script src=”js/jquery-1.11.3.min.js”

    and then it stop working…

    But thanks… it’s really good stuff…

  14. Thank you! Good Post…

  15. #sidebar-wrapper
    height : 100%
    causing default scroll on page load
    Do anyone facing the same issue?

  16. #sidebar-wrapper
    { height : 100% }
    causing scroll on initiial browser loading . Do any one facing the same issue ?

    • #sidebar-wrapper
      { height : 100% }
      causing scroll on initiial browser loading

      1. Suppose if we are having a header & footer in page and placed the sidebar menu with the above style
      Header style
      .main-header {
      top: 0;
      right: 0;
      left: 0;
      height: 5%;
      background-color: #009530;
      border-color: transparent;
      margin: 0;
      footer {
      bottom: 0;
      background-color: #009530;
      color: #fff;
      width: 100%;
      position: fixed;
      padding-left: 15px;
      padding-right: 15px;
      height: 60px;
      z-index: 1000;

      Copyright 2015 © Schneider Electric. All rights reserved.

      This will also cause scrolling on browser. currently we have handled with height:calc(100% – 55px); for fixing the scroll issue. but i think this is not a proper solution.

      2. One more suggestion instead of width: 250 px specifying in pixels, is it easier to modify in percentage wise?

  17. Link :
    Not works well in safari OS 10.10, when side bar button is pressed to hide the menu, content glitches

  18. Thank you very much this is great!
    Is there a way to tweak javascript or css so that the menu bar default state is hidden (shrinked)?
    Also, I dont know why, but it doesnt show icons on my computer, just some strange empty rectangles.

    Thank you,

    • 1. If you need to hidden the menu bar default state ,edit script below on sidebar_menu.js

      $(document).ready(function() {initMenu();$("#menu-toggle-2").click();});

      2. Check with f12 for strange empty rectangles icon

      • Thank you very much for replay!

        Yes, I wanted the menu bar to be collapsed all the time but to keep it popping out on mouse over. I tried with changing the sidebar_menu.js to something like this:

        $(document).ready(function() {initMenu();

        And It is working with this code, the menu bar is collapsed by default and it pops out on mouse over, but only on big and medium resolution. When the window is resized on small resolution (like mobile) then menu bar shows again in full width and I want to prevent that.

        My guess is that it has to do with “navigation bar” (on the top of the page) collapsing state. But I don`t know how to handle it.

        Thank you very much for your help 🙂

        Thank you, it is great

  19. Great but I find your right side space is not expanding when tested and i removed the overflow hidden in your css file and the right side is expanding where i would like to add some content running to pages.
    Similary i need to expand the left side menu. I tested adding some more menu elements but its fixed and does not scroll down to show the rest of the menu elements. What to do sir?

  20. how do i hide the nav bar when page loads, when i click on the toggle button i need it to load the menu

  21. Hi. I wanted to change the color of the tabs after clicking them. I’ve had progress (I managed to change the color of the other tabs) but I cant make the Dashboard tab lose it color when it is not the clicked tab. How can I do it? Thank youl.

    • sory, i dont understand what you mean :). please explain me more

      • Never mind. I already solved my problem. But I still have another problem, how can I make the tabs toggable? I mean when I click on the tab, it shows the content, but when I click it again when the contents are shown, it doesn’t hide its contents. How can I make it like that? Thank you so much.

  22. Hello, is it possible to remember the state of the sidebar (collapsed / expanded) when the page refreshes?
    Thank you.

  23. Good day i wonder if i can disable the hover button and do this automatically when the page load, and if you can help me with that.

  24. Hey love this but my only issue is that it doesn’t go 100% height. If I add anything to the wrapper on the right side more than around a 1000px the sidebar stops and the content keeps going in the same size as above. So I added 2000px to the height property and the sidebar gets to the right length but that means I have to figure out the exact height. Obviously I can do this but wondering why the 100% height wouldn’t work.

  25. I am wondering how to put a marker on the sidebar link that is active. Like when you click the shortcuts menu and it goes to that page. Instead of say a color change you put a triangle at the edge so it picks up the color of the main content area. I have seen this on other sites but can’t figure out how they do it. Thanks for the help!

  26. Awesome, thanks ! just a little change that I had to make in the .js file:

    $(document).on(“click”, “#target-id”, function(e){
    {{ rest of the stuff }}

    without this collapse button was not working. Otherwise perfect !

  27. Unable to download the script, kindly assist.

  28. how to make this page like site1.master … any new form will be fire-up within this main page. tq

  29. Great Menu.
    When we click on the content brought up in the center area after clicking a left side menu option the color of the menu changes to
    background: rgba(255, 255, 0, 0.701961);

    When we click the menu we have our yellow color by:
    .sidebar-nav li a:active,
    .sidebar-nav li a:focus {
    text-decoration: none;
    background: #ffff00;
    in simple-sidebar.css

    Is there a way that we can keep the selected left menu option as #ffff00, preventing:
    background: rgba(255, 255, 0, 0.701961);
    from being the background color?


  30. I found the issue. It was in my code.
    Great Menu!

  31. Thanks for the great work you did with this.
    How can the I make only the page content scroll while both the nav bars remain fixed

  32. Awesome post. Trying hard to get this to work with a sticky footer. Is this possible?

  33. great work but how make right to left , i changed all (****-right) or (right) to (***-left) or (left) and vise versa in css file also i use “” over bootstrap 3.3.6 , to rlt language , but always icons on the left and text on the right , how solve it? Note: iam new in those things

  34. This works great but I want to this to be like master so it can apply to all pages…

  35. Hi, great tutorial, but how can i apply this to ASP.NET MVC app ?

  36. Hi, excellent work. This menu can have a third level? Or only can have two levels.

    Thankd a lot

  37. Thanks for your nice work. Could you also explain that how can I port this sidebar to the WordPress?

  38. Hi Sigit, thanks you so much for your code, it is working perfectly and very elegant, instructions how to use so clear. Thanks a lot , great job!!

  39. Hi! This is great! Wonderful work. I have a question.

    I see that if i uncomment $(‘#menu ul:first’).show(); I can get the first UL to expand by default. How can I make it so that the second or third or fourth is expanded by default? my first guess — ul:second doesn’t do it… internet hasn’t helped me find how to reference these subsequen UL items …. Thanks!

    • A little searching in jquery — I found eq(n) where n is the index — so, menu ul:eq(3) will show fourth menu item… Thanks anyways!

  40. thank you very much for the tutorial 😉 . but the icon didnt appear 🙁 . maybe there is something i missing?

  41. How can we make the stack collapsible using the same line item link after it’s expanded? The only way to close them is by clicking another pill that’s also expandable.

  42. Hey, great job! Just I’ve encoutered the problem of height 100% with page header of 60px causing 60px of vertical scroll in page. Have you find any solution? the height:calc(100% – 60px); statment seems to not working!

    Thanks in advance!

  43. Thanks for this excellent tutorial.

    By your example, once I click the sidebar menu on “Dashboard” or “Shortcut”, it shows its corresponding submenu “link1” and “link2.”
    Is it possible that if I clink the same menu again (dashboard or Shortcut) then it collapses its submenu.

    The expected scenario is:
    When I click Dashboard in 1st time, it shows its submenu.
    When I click Dashboard (not click Shortcut) in 2nd time, it collapses its submenu.

    Thank you very much.

  44. Terima kasih pak sigit, tutornya OK..

  45. Hello, awesome job you did here! Could you give me a hint of how to stop the menu toggleing? I’m noob with jQuery 🙂

  46. Great tut!
    Is it possible to have side bar on desktop and standard top bar on mobile?
    How can this be done?

    Also is it possible to click a link to show the submenu and click again to hide the submenu?


  47. Hi, thanks for the great work. I noticed that the sidebar disappear in small devices. Do you know why and how to fix it. Another thing, can I use two instances (left and right) in one page?

  48. Hello,

    Your tutorial includes expanding the UL when clicked to show sub items (Link 1 / Link 2).
    How can it be amended so that a second click hides the sub items again?


    • I figured it out:

      function initMenu() {
      $(‘#menu ul’).hide();
      $(‘#menu ul’).children(‘.current’).parent().show();
      //$(‘#menu ul:first’).show();
      $(‘#menu li a’).click(
      function () {
      var checkElement = $(this).next();
      if ((‘ul’)) && (‘:visible’))) {
      $(‘#menu ul:visible’).slideDown(‘normal’);
      return false;
      if ((‘ul’)) && (!‘:visible’))) {
      $(‘#menu ul:visible’).slideUp(‘normal’);
      return false;


  49. Your facebook ‘likes’ were 721 when I followed your instruction in order to download your cool sidebar script. But after I augmented the figure to 722, I still could not download the script. It still remained ‘Locked’.

  50. I checked again, but still could not download the script. How many times is someone supposed to go to Facebook and ‘like’ your site before being able to download the script please?

  51. Great job! Thanks a lot!

  52. Hi great work! Thank you. How can I fully hide the sidebar menu when toggled to close? (No icons appearing and just full content showing)

  53. Thanks for the script. It is grant. I had a question. Would it be possible to have two branding for normal and mobile viewing? Also how would you add more links to the right of the header strip as it would be good for some informative labels maybe. I appreciate your help.

  54. hello,

    When i Click on the submenu (Link 1/ Link 2) with a a ref. (Ajax.ActionLink) the side bar collapses.

    How can i stop it??

    I tried several things in function initMenu(). but nothing works..

    Who can help me?

  55. Sorry the form trunk my code,

    maybe i can send you by mail

  56. This is amazing. Is there a way to integrate this into Drupal 7. I’m using Bootstrap 3 theme there and trying to find a way to make my menu look like in this tutorial.

  57. Looks great! Thank you, looking forward to reviewing your tutorial. Any tutorials on JSF and bootstrap or Facelets Templates

  58. Really good one. But I have observed one issue.
    1. Open sub-menu of Dashboard
    2. Click menu toggling
    3. Sub-menu items / icons are not displaying.

    I have observed this is because sub-menu size is less and also whenever hover it highlights small portion instead of full line.

    Please help me to resolve the same.

  59. How can I please comment with return dialog with you? I simply love your adaptation and have a question.

  60. how will i implement Ajax for loading contents when a menu item is clicked.

    • Simple example, give new attribute on a element

      [php]<a href=’#’ class=’go-to-menu’ menu-id=’3′ rel="nofollow">menu 3</a>[/php]
      var menu = $(this).attr(‘menu-id’);
      var value = {
      menu-number= menu;
      url : "menu.php",
      type: "POST",
      data : value,
      success: function(data, textStatus, jqXHR)
      // load content here
      error: function(jqXHR, textStatus, errorThrown)

      I have not tried the above code, but that’s the basic code..hope useful

  61. can when the page load Close the Navigation on click open… now by start the site is open the Navigation many thx!!

  62. Hi, I’ve a question when in the page we’ve divs that generate scroll the sidebar menu not use the height 100%, appear a white space under of this.

    You can see this here:

  63. And here you can see the issue of the height:

    ———— hidden url ——————

    • thank you for correcting,

      fix the css like code below
      #wrapper {
      padding-left: 0;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
      overflow: hidden;
      background-color: #000;
      #sidebar-wrapper {
      z-index: 1000;
      position: absolute;
      left: 250px;
      width: 0;
      height: 100%;
      margin-left: -250px;
      overflow-y: auto;
      background: #000;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
      overflow: hidden;
      #page-content-wrapper {
      position: absolute;
      padding: 15px;
      width: 100%;
      overflow-x: hidden;
      background-color: white;

      Hope fix your problem

  64. Hi, I tested the css and work, now the issue persist when the menu initialize with this code in the function initMenu() $(“#wrapper”).toggleClass(“toggled toggled-2”); for make the menu show only icons.

    Here you can see the issue:!TVNATBQQ!HCbWotWRvwcpBhO2LqDc8HWABIHps_WzrgxaKiK0DmM

  65. Hi Sir.
    Great job. Thanks.
    How can make a second click to hide the sub item Dashboard again?
    Thanks in advance

  66. Hi Sir.
    Great job. Thanks.

  67. Hello,

    How i can fix the toogle button. it always resize according the screen size. so on big screen it is far away on the right of the slidebar.

  68. Wow, Thank you for this feature really awesome

  69. Is it possible to hide the sidebar on page load instead of on button click

  70. I am using this for the master page and the problem I am facing is the display is showing in the middle of the page

  71. hay thank you for sharing , i am trying to include it in angular 2 project but am having some difficulties using jquery in angular 2 ,
    please can you give me the side bar menu in javascript or some other solution and thannk you so much

  72. This is a great sidebar, thanks for sharing:) Can you help me with a modification? I would like to have the toggle menu button at the very left on the navbar (where u have placed the brand name) on both desktop and mobile devices. And a logo image at the middle of the navbar. I would really appreciate of you can help me, couse i can t figure it out :/

  73. Awesome navbar. One question, is it possible to add the toggle button that is currently on the top header to actually display inside the left navigation bar?

  74. Hi Sigit, Unable to download.


  75. Hi, greata tutorial!
    But my problem is that it doesn’t show sidebar menu and SEEGATESITE left icons…

  76. Good example, I need small help on hove I don’t want to expand the menu how can I do that. I need to show or hide the menu on button click. Sub menu’s I want to display to the right how can I do that.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.