BG Pattern

How To Create a Customize Side Navigation Menu

BG-Pattern Sidebar is a basic sidebar menu page layout for Bootstrap websites with off canvas navigation on smaller screen sizes. Our Sidebar navigation can make your life easier by providing a starting, simple Sidebar navigation with sub-categories for your next project. It is a great starting point for minimal dashboard web apps, or general websites with a toggleable sidebar.

Features

• Sidebar navigation is Bootstrap Responsive.
• Navigation bar with toggle button on mobile or tab screens.
• Page content area is Responsive.
• Off-canvas navigation toggling on mobile or tab screens.
• Multi level navigation menu with icons.

Creating the structure

The HTML structure is composed by 2 main elements : navigation brand logo and navigation menu structure.

Brand logo or name

<div class="navbar-brand"><a href="#"><h1>BG <span>Pattern</span></h1></a></div>

Custom navigation menu

<nav class="navbar myNav mr-auto justify-content-end">    
                <ul>
                	<li class="sidebar-brand"> BG Pattern </li>
                    <li><a href="#"><i class="fa fa-home"></i>Home</a></li>  
                    <li><a href="#"><i class="fa fa-info"></i>About Us</a></li>  
                    <li><a href="#"><i class="fa fa-folder-o"></i>Categories</a>
                    	<ul>
                            <li><a href="#"><i class="fa fa-folder-o"></i>Dark Category</a>
                            	<ul>
                                    <li><a href="#">Dark</a></li> 
                                    <li><a href="#">Background</a></li>
                                </ul>
                            </li> 
                            <li><a href="#"><i class="fa fa-folder-o"></i>Background Category</a></li>
                            <li><a href="#"><i class="fa fa-envelope-o"></i>Web Category</a></li>
                        </ul>
                    </li>  
                    <li><a href="#"><i class="fa fa-newspaper-o"></i>Blog</a></li>  
                    <li><a href="#"><i class="fa fa-list-ul"></i>Top Tags</a>
                    	<ul>
                            <li><a href="#">Dark</a></li> 
                            <li><a href="#">Background</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="fa fa-envelope-o"></i>Contact us</a></li>  
                </ul>
                
            </nav>

Close navigation button

<div class="navclose"><i class="fa fa-close"></i></div>

Navigation button

<div class="navbtn"><i class="fa fa-bars"></i></div>

Js function that perform toggling.

$('.navbtn').click(function(){
	$("nav,.navclose").addClass("show");
});
$('.navclose').click(function(){
	$("nav,.navclose").removeClass("show");
});

If you want to toggle on click on .navbtn write this code.

$('.navbtn').click(function(){
	$("nav,.navclose").toggleClass("show");
});
$('.navclose').click(function(){
	$("nav,.navclose").removeClass("show");
});

Result

Navigation menu toggle on @media screen and (max-width:991px)

Download source code