Sidebar Configuration

The sidebar values are of string type and can be configured as follows:

Sidebar Type
  • Property: "sidebar_type"
  • Choices: "sidebar-hover", "sidebar-mini", "sidebar-soft"

Example

"sidebar_type": { "value" : ["sidebar-mini"] }
Sidebar Senu Style
  • Property: "sidebar_menu_style"
  • Choices: "navs-rounded", "navs-rounded-all", "navs-pill", "navs-pill-all"

Example

"sidebar_menu_style": {
  "value": "navs-rounded-all"
  }

Changing Sidebar Settings

1. Using the Live Customizer

You can work on themes using the Live Customizer

By Declaring Properties in setting.js

Example setting.js

sidebar_type: {
     target: '[data-toggle="main-sidebar"]',
     choices: ["sidebar-hover", "sidebar-mini", "sidebar-soft"],
     value: [],
   },
sidebar_menu_style: {
 target: '[data-toggle="main-sidebar"]',
     choices: [
   "navs-rounded",
   "navs-rounded-all",
   "navs-pill",
   "navs-pill-all"
    ],
 value: "navs-rounded-all",
},
1. Manual Configuration

You can change the sidebar type with a single action by adding the appropriate classes or attributes to the <body> or <html> tags.

Sidebar Type

To change the sidebar type, set the class in aside:

  • Sidebar Mini:
    • <aside class="sidebar-mini">
    .......
</aside>
Sidebar Menu Style

To change the sidebar menu style, set the class attribute in the <aside> tag:

  • Nav Pills All:
    • <aside class="nav-pills-all">
    .......
</html>
Previous Next