## AdminLTE Javascript Options

Modifying the options of AdminLTE's app.js can be done using one of the following ways.

### Editing app.js

Within the main Javascript file, modify the `$.AdminLTE.options` object to suit your use case.

### Defining AdminLTEOptions

Alternatively, you can define a global options variable named `AdminLTEOptions` and initialize it before loading app.js.

Example

    <script>

      var AdminLTEOptions = {

        //Enable sidebar expand on hover effect for sidebar mini

        //This option is forced to true if both the fixed layout and sidebar mini

        //are used together

        sidebarExpandOnHover: true,

        //BoxRefresh Plugin

        enableBoxRefresh: true,

        //Bootstrap.js tooltip

        enableBSToppltip: true

      };

    </script>

    <script src="dist/js/app.js" type="text/javascript"></script>

### Available AdminLTE Options

    {

      //Add slimscroll to navbar menus

      //This requires you to load the slimscroll plugin

      //in every page before app.js

      navbarMenuSlimscroll: true,

      navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar

      navbarMenuHeight: "200px", //The height of the inner menu

      //General animation speed for JS animated elements such as box collapse/expand and

      //sidebar treeview slide up/down. This option accepts an integer as milliseconds,

      //'fast', 'normal', or 'slow'

      animationSpeed: 500,

      //Sidebar push menu toggle button selector

      sidebarToggleSelector: "[data-toggle='offcanvas']",

      //Activate sidebar push menu

      sidebarPushMenu: true,

      //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)

      sidebarSlimScroll: true,

      //Enable sidebar expand on hover effect for sidebar mini

      //This option is forced to true if both the fixed layout and sidebar mini

      //are used together

      sidebarExpandOnHover: false,

      //BoxRefresh Plugin

      enableBoxRefresh: true,

      //Bootstrap.js tooltip

      enableBSToppltip: true,

      BSTooltipSelector: "[data-toggle='tooltip']",

      //Enable Fast Click. Fastclick.js creates a more

      //native touch experience with touch devices. If you

      //choose to enable the plugin, make sure you load the script

      //before AdminLTE's app.js

      enableFastclick: true,

      //Control Sidebar Tree Views

      enableControlTreeView: true,

      //Control Sidebar Options

      enableControlSidebar: true,

      controlSidebarOptions: {

        //Which button should trigger the open/close event

        toggleBtnSelector: "[data-toggle='control-sidebar']",

        //The sidebar selector

        selector: ".control-sidebar",

        //Enable slide over content

        slide: true

      },

      //Box Widget Plugin. Enable this plugin

      //to allow boxes to be collapsed and/or removed

      enableBoxWidget: true,

      //Box Widget plugin options

      boxWidgetOptions: {

        boxWidgetIcons: {

          //Collapse icon

          collapse: 'fa-minus',

          //Open icon

          open: 'fa-plus',

          //Remove icon

          remove: 'fa-times'

        },

        boxWidgetSelectors: {

          //Remove button selector

          remove: '[data-widget="remove"]',

          //Collapse button selector

          collapse: '[data-widget="collapse"]'

        }

      },

      //Direct Chat plugin options

      directChat: {

        //Enable direct chat by default

        enable: true,

        //The button to open and close the chat contacts pane

        contactToggleSelector: '[data-widget="chat-pane-toggle"]'

      },

      //Define the set of colors to use globally around the website

      colors: {

        lightBlue: "#3c8dbc",

        red: "#f56954",

        green: "#00a65a",

        aqua: "#00c0ef",

        yellow: "#f39c12",

        blue: "#0073b7",

        navy: "#001F3F",

        teal: "#39CCCC",

        olive: "#3D9970",

        lime: "#01FF70",

        orange: "#FF851B",

        fuchsia: "#F012BE",

        purple: "#8E24AA",

        maroon: "#D81B60",

        black: "#222222",

        gray: "#d2d6de"

      },

      //The standard screen sizes that bootstrap uses.

      //If you change these in the variables.less file, change

      //them here too.

      screenSizes: {

        xs: 480,

        sm: 768,

        md: 992,

        lg: 1200

      }

    }