"Responsive Navigation Menu"
Bootstrap 3.2.0 Snippet by ishwarkatwe

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="nav-side-menu"> <div class="brand">Brand Logo</div> <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> <div class="menu-list"> <ul id="menu-content" class="menu-content collapse out"> <li> <a href="#"> <i class="fa fa-dashboard fa-lg"></i> Dashboard </a> </li> <li data-toggle="collapse" data-target="#products" class="collapsed active"> <a href="#"><i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="products"> <li class="active"><a href="#">CSS3 Animation</a></li> <li><a href="#">General</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Tabs & Accordions</a></li> <li><a href="#">Typography</a></li> <li><a href="#">FontAwesome</a></li> <li><a href="#">Slider</a></li> <li><a href="#">Panels</a></li> <li><a href="#">Widgets</a></li> <li><a href="#">Bootstrap Model</a></li> </ul> <li data-toggle="collapse" data-target="#service" class="collapsed"> <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="service"> <li>New Service 1</li> <li>New Service 2</li> <li>New Service 3</li> </ul> <li data-toggle="collapse" data-target="#new" class="collapsed"> <a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="new"> <li>New New 1</li> <li>New New 2</li> <li>New New 3</li> </ul> <li> <a href="#"> <i class="fa fa-user fa-lg"></i> Profile </a> </li> <li> <a href="#"> <i class="fa fa-users fa-lg"></i> Users </a> </li> </ul> </div> </div>
.nav-side-menu { overflow: auto; font-family: verdana; font-size: 12px; font-weight: 200; background-color: #2e353d; position: fixed; top: 0px; width: 300px; height: 100%; color: #e1ffff; } .nav-side-menu .brand { background-color: #23282e; line-height: 50px; display: block; text-align: center; font-size: 14px; } .nav-side-menu .toggle-btn { display: none; } .nav-side-menu ul, .nav-side-menu li { list-style: none; padding: 0px; margin: 0px; line-height: 35px; cursor: pointer; /* .collapsed{ .arrow:before{ font-family: FontAwesome; content: "\f053"; display: inline-block; padding-left:10px; padding-right: 10px; vertical-align: middle; float:right; } } */ } .nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before { font-family: FontAwesome; content: "\f078"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; float: right; } .nav-side-menu ul .active, .nav-side-menu li .active { border-left: 3px solid #d19b3d; background-color: #4f5b69; } .nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active { color: #d19b3d; } .nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a { color: #d19b3d; } .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li { background-color: #181c20; border: none; line-height: 28px; border-bottom: 1px solid #23282e; margin-left: 0px; } .nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover { background-color: #020203; } .nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before { font-family: FontAwesome; content: "\f105"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; } .nav-side-menu li { padding-left: 0px; border-left: 3px solid #2e353d; border-bottom: 1px solid #23282e; } .nav-side-menu li a { text-decoration: none; color: #e1ffff; } .nav-side-menu li a i { padding-left: 10px; width: 20px; padding-right: 20px; } .nav-side-menu li:hover { border-left: 3px solid #d19b3d; background-color: #4f5b69; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } @media (max-width: 767px) { .nav-side-menu { position: relative; width: 100%; margin-bottom: 10px; } .nav-side-menu .toggle-btn { display: block; cursor: pointer; position: absolute; right: 10px; top: 10px; z-index: 10 !important; padding: 3px; background-color: #ffffff; color: #000; width: 40px; text-align: center; } .brand { text-align: left !important; font-size: 22px; padding-left: 20px; line-height: 50px !important; } } @media (min-width: 767px) { .nav-side-menu .menu-list .menu-content { display: block; } } body { margin: 0px; padding: 0px; }

Related: See More

Questions / Comments:

Hello guys, i need help!
Where do i add the content of the main body?

Kay Org () - 3 years ago - Reply -1

sub-menu is not opening ? any idea what is the problem ?

aamsoh (-3) - 1 year ago - Reply -3

Good day!

How can keep toggle menu expand on page load?

AJPII () - 4 months ago - Reply 0

hey pls eplain how to install this script ..

hebron () - 3 years ago - Reply 0


A question: when i click one of the sub-menu, and that opened a new page, how can i collapsed out the active menu?I want to show, which sub-menu is opened.

Sorry my low-level english.


MrGreko () - 3 years ago - Reply 0

Can someone provide the list of scripts and css that are required?
I'm trying bootstrap.min.css, bootstrap.min.js , font-awesome.min.css, and jquery-3.1.1.js.
It's failing to work and I also included the css in the tab here

Arren () - 3 years ago - Reply 0

CSS(in <head>)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

JS(before closing </body>)

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

CatWoman817 () - 1 year ago - Reply 0

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/boo...">
<script src="//maxcdn.bootstrapcdn.com/boo..."></script>
<script src="https://ajax.googleapis.com..."></script>

Hebert Marin () - 3 years ago - Reply 0


Dons Opinions () - 3 years ago - Reply 0

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn...">

<script src="https://ajax.googleapis.com..."></script>

<script src="https://maxcdn.bootstrapcdn..."></script>

Ranish Weerakkody () - 3 years ago - Reply 0

After two days,....
Menu roll down correctly, but after that, stay open, can be rolled up with click. Also, in toggle mode, toggle button and whole menu are visible. Any suggestion?

Svetionicar () - 4 years ago - Reply 0

does it work in latest bootstrap (v3.3.7)

muz () - 4 years ago - Reply 0

okay. it works

muz () - 4 years ago - Reply 0

how to put it into page, content only visible in mobile view not in desktop view

Sonu Singh () - 4 years ago - Reply 0

I need replacement for CDN. Also how can i change the background colors of menu bars??

naveen () - 4 years ago - Reply 0

My Sub-menu isn't work so can u help me.....

Azhar Rao () - 4 years ago - Reply 0

Thanks for this work but how i can click on <li> element ?

Tetrix () - 4 years ago - Reply 0

In small screen devices it is collapsing properly but after opening once I am unable to close it again.In short Toggle is not working properly,. Some one please help me out

Syed Sajid () - 4 years ago - Reply 0

done integrating it to my page but it does not collapse back in to compressed default after clicking it.

Eric James P Belleca () - 4 years ago - Reply 0

GOT IT! .... incompatible with 3.3.5 Bootstrap

Eric James P Belleca () - 4 years ago - Reply 0

mine doesnt collapse back in... what could have i done wrong?

Eric James P Belleca () - 4 years ago - Reply 0

hi, ow can i put a third level? i mean, sub menu within a submenu

Pedro Gonzalez Reveco () - 4 years ago - Reply 0

thanks , That menu is beautiful, how can i prevent an item to expand when another items are expanded .. ?

Basim () - 5 years ago - Reply 0

If you cant add main content to the right try this:

<div class="container-fluid>
<div class="row">
< !-- this is the sidebar -->
<div class="nav<div class="nav-side-menu col-md-2">; ... </div>

<div class="col-lg-offset-2 col-lg-8"> ... </div>



Diego Estela () - 5 years ago - Reply 0

That menu is beautiful, but how can I make add some container with rows and columns?
It's over the menu. Plaese I need some advide.

Raflindas () - 5 years ago - Reply 0

Which version of jQuery is being used?

Hiury () - 5 years ago - Reply 0

Hello, I am facing the same problem. It does not work for my bootstrap.js. Because the links are open before and the Toggle menu does not close after I open. If you can help me, I am grateful.

Hiury () - 5 years ago - Reply 0

Put the JS bootstrap at the end document. It works. Functional and beautiful menu. Thank you!!!

Michelle () - 5 years ago - Reply 0

how can i get the icon?

Ronald Raymundo () - 5 years ago - Reply 0

Hello, I really like this Menu, but I'm new on bootstrap and i'm having problems, the main content that its in <div class="container body-content"> shows behind the menu, I managed to fix this by modifying the padding on body-content class, but then when I resize, before it dissapears, the main content goes behind the menu again. Is there anyway to not get this or get a scrollbar or something ike that? thanks

Krash () - 5 years ago - Reply 0

I had a Problem collapse not working and I'm also using Bootstrap version 3.2.0 . Please Help me .
Thanks in Advance

Kamran Karim Bukhsh () - 5 years ago - Reply 0

You need jQuery and Bootstrap JS to be used before you try to use this code too :)

maxsurguy () - 5 years ago - Reply 0

hey brother i have used both as well ok. Its not working :)
Please help if you can

Kamran Karim Bukhsh () - 5 years ago - Reply 0

thanks for the reference but i am unable to collapse the menu

Ahad () - 5 years ago - Reply 0

It is blank first but when we re size to mobile and collapse the menu then it gets visible

Mohammad Faizan Atiq () - 5 years ago - Reply 0

Replace <ul id="menu-content" class="menu-content collapse out">


<ul id="menu-content" class="menu-content collapse in">

Mohammad Faizan Atiq () - 5 years ago - Reply 0

Works! thank you very much!

Walkiria Suero () - 5 years ago - Reply 0

anyone have the issue of bootstrap.css covering up the main body of the nav?

ee () - 5 years ago - Reply 0

support for multilevel submenu?, how to show if there is a submenu in the submenu?

cyberchezee () - 5 years ago - Reply 0

this support for multilevel menu?

Guest () - 5 years ago - Reply 0

That's what i wanted.
Thanks for saving me from coding it from scratch.
Thanks Again

Tanmay () - 5 years ago - Reply 0

Mike Fedd () - 5 years ago - Reply 0

will this work with skeleton?

Tyler Oberley () - 5 years ago - Reply 0

Simple and beautiful. Thank you very much, this is just what I was looking for.
However, the markup is invalid: the UL elements which contain the submenus are children of another UL element.
But this was very easy to solve, I just wrapped the submenus UL elements inside their ancestor LI. It worked perfectly, and gives a nice effect too when a submenu is expanded IMO.

Leda Ferreira () - 5 years ago - Reply 0

how to set, left side(side bar) and right side(main contents).

i used
" <div class="col-md-2"> {side bar} <div>
<div class="col-md-10"></div> ", but layout is so bad.

help me, please.

min () - 5 years ago - Reply 0

For content try use container
<div class="container">Your Content</div>

and add a csss

.container {

DT () - 5 years ago - Reply 0

just update this with a nice font-family, please...

L34ndr0 () - 5 years ago - Reply 0

Hey there,

Is this compatible with 3.3.1? It's not working for me, the only thing I can see if the Brand Logo part but everything below is not visible (the buttons etc). Can you make a simpler version of this, or so?

Thanks and great job, I love it. Wish I could use it!

FPJ () - 5 years ago - Reply 0

add css in this class its working for me

.nav-side-menu .menu-list .menu-content{
visibility:visible !important;

Muthu Kumar () - 5 years ago - Reply 0

Thank you!!!!!!!!

Stenio Ferreira () - 5 years ago - Reply 0

The issues as discuss below are solved find the updated snippet thanks!

Ishwar () - 5 years ago - Reply 0

Hey thanks for updating the issue . But for query which I made . can it be made an accordion menu ? the css transitions looks nice when only one menu is open at a time ? can it be possible ?

Joy () - 5 years ago - Reply 0

I think what you want to do can be achieved through this jquery code at the bottom of your page:

$("#products, #service, #new").collapse('hide');

At least it's working for me.

Alexandros Karras () - 5 years ago - Reply 0

ya thats possible for that u have to config jquery script provided by bootstrap will update it soon

Ishwar () - 5 years ago - Reply 0

shouldn't this have been more elegant if accordion concept was used ? I mean only one menu at a time should have been open rathar than all can be expanded ? That wont leave us with a problem that last menu item is not displayed when all items are expanded

Joy () - 5 years ago - Reply 0

When all the menu items are expanded , the last menu item is not displayed properly

emilrichard () - 5 years ago - Reply 0

I had the same problem, this is how I solved it. Adjust the values (92% and 50px) the way it suits you better.

height: 92%; /* browsers without calc() support */
height: -moz-calc(100% - 50px);
height: -webkit-calc(100% - 50px);
height: calc(100% - 50px);

Leda Ferreira () - 5 years ago - Reply 0

Hey, where is the javascript?
it doesnt work for me with only use bootstrap.js

Guest () - 5 years ago - Reply 0

There is no JS for this snippet. You must use Bootstrap JS and CSS version 3.2.0

maxsurguy () - 5 years ago - Reply 0

hey what's up maxsurguy your website helps me a lot on school web projects thank your very much (Y)

NIRO () - 5 years ago - Reply 0