You can change or customize the left side navigation very easily. Following guide would help you to do that.
How to add new menu items/change menu items?
In order to add, change or remove menu items from the left side navigation, simply edit in file
src/html/partials/left-sidebar.html. The change would reflect in all the html files automatically.
We are using
gulp-file-include which would actually take
care of including the
left-sidebar.html file content in all the html pages.
How to change width?
In order to change the width of left side navigation bar, open a file
src/scss/_variables.scss and change the value of variable
$leftbar-width. The default value is set to
How to change background or menu text color?
In order to change the background color, open a file
src/scss/scss/_variables.scss and change the value of variable
$bg-leftbar-light the default light value is set to
$bg-leftbar-dark the default dark value is set to
When you change the background color, you might want to change the color of menu accordingly. To change
the color of menu item, change the variable
$menu-item (Default is set to
Similarly, change the value of variables
You can change other styles by making modifications in
How to use pre-built layouts?
Each of the layout options is provided below with steps you would need to perform:
Small SidebarKeep your body element with class
<body class="left-side-menu-sm">to have small sidebar.
Dark SidebarKeep your body element with class
<body class="left-side-menu-dark">to have dark sidebar.
Light TopbarKeep your body element with class
<body class="left-side-menu-dark topbar-light">to have dark sidebar with light topbar.
Collapsed SidebarKeep your body element with class
enlargedand data attribute
<body class="enlarged" data-keep-enlarged="true">to have collapsed sidebar.
Boxed layoutKeep your body element with class
enlarged boxed-layoutand data attribute
<body class="enlarged boxed-layout" data-keep-enlarged="true">to have boxed layout.
PreloaderIn order to add pre-loader in your page, include following html after
<div id="preloader"> <div id="status"> <div class="bouncingLoader"><div ></div><div ></div><div ></div></div> </div> </div>