Solid Color Menu Background
This table contains all the solid color menu background that looks great when filled in the menu sidebar background. They happens to be the app colors as well. You can always check our demo and change solid colors from the customization panel found on the right side.
All these options can be set changing data-background-color attribute :
| Solid Colors | Description |
|---|---|
black |
You can fill black color in the menu background by changing data-background-color attribute's value to black found in the html file. |
white |
You can fill white color in the menu background by changing data-background-color attribute's value to white found in the html file. |
primary |
You can fill primary color in the menu background by changing data-background-color attribute's value to primary found in the html file. |
info |
You can fill info color in the menu background by changing data-background-color attribute's value to info found in the html file. |
success |
You can fill success color in the menu background by changing data-background-color attribute's value to success found in the html file. |
warning |
You can fill warning color in the menu background by changing data-background-color attribute's value to warning found in the html file. |
danger |
You can fill danger color in the menu background by changing data-background-color attribute's value to danger found in the html file. |
Gradient Color Menu Background
This table contains all the gradient color menu background that looks great when filled in the menu sidebar background. You can always check our demo and change gradient colors from the customization panel found on the right side.
All these options can be set changing data-background-color attribute :
| gradient Colors | Description |
|---|---|
pomegranate |
You can fill pomegranate color in the menu background by changing data-background-color attribute's value to pomegranate found in the html file. |
king-yna |
You can fill king-yna color in the menu background by changing data-background-color attribute's value to king-yna found in the html file. |
ibiza-sunset |
You can fill ibiza-sunset color in the menu background by changing data-background-color attribute's value to ibiza-sunset found in the html file. |
flickr |
You can fill flickr color in the menu background by changing data-background-color attribute's value to flickr found in the html file. |
purple-bliss |
You can fill purple-bliss color in the menu background by changing data-background-color attribute's value to purple-bliss found in the html file. |
man-of-steel |
You can fill man-of-steel color in the menu background by changing data-background-color attribute's value to man-of-steel found in the html file. |
purple-love |
You can fill purple-love color in the menu background by changing data-background-color attribute's value to purple-love found in the html file. |
Menu Bg Image
How to change sidebar menu background image?
Change the data-image attribute's value found in the html file to whatever image you want to display as sidebar menu background image.
Where to put background image?
Many sidebar background image options can be found in the app-assets/img/sidebar-bg/ folder.
Recommended image size?
Recommended image size for the sidebar menu background image is 400 X 800.
Compact Menu
If you are one of those like me who loves menu to be compact by default then you need not worry. Just add below two class with wrapper class found in the html file.
nav-collapsed menu-collapsed
Menu Width
You have 3 different menu sidebar sizes to choose from.
All options are defined in below table :
| Options | Classes | Description |
|---|---|---|
| Small | sidebar-sm |
Add sidebar-sm class to the .wrapper class found in the html file. |
| medium | No class required |
By default the menu size is medium and you do not need to add or remove any class. |
| large | sidebar-lg |
Add sidebar-lg class to the .wrapper class found in the html file. |