Layout API

Sidebar Visibility

Toggle

Opens or Closes the Sidebar based on its current state

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_toggle">Toggle Sidebar</button>

JS Code

Dashmix.layout('sidebar_toggle');

Open

Opens the Sidebar

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_open">Open Sidebar</button>

JS Code

Dashmix.layout('sidebar_open');

Close

Closes the Sidebar

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_close">Close Sidebar</button>

JS Code

Dashmix.layout('sidebar_close');

Sidebar Position

Toggle

Sets the Sidebar position to the left or to the right based on its current position

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_pos_toggle">Toggle Sidebar Position</button>

JS Code

Dashmix.layout('sidebar_pos_toggle');

Right

Moves the Sidebar to the right

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_pos_right">Right Sidebar Position</button>

JS Code

Dashmix.layout('sidebar_pos_right');

Left

Moves the Sidebar to the left

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_pos_left">Left Sidebar Position</button>

JS Code

Dashmix.layout('sidebar_pos_left');

Sidebar Mini

Toggle

Toggles the Sidebar Mini mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_mini_toggle">Toggle Mini Mode</button>

JS Code

Dashmix.layout('sidebar_mini_toggle');

Enable

Enables the Sidebar Mini mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_mini_on">Enable Mini Mode</button>

JS Code

Dashmix.layout('sidebar_mini_on');

Disable

Disables the Sidebar Mini mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_mini_off">Disable Mini Mode</button>

JS Code

Dashmix.layout('sidebar_mini_off');

Sidebar Styles

Toggle

Toggles Sidebar style between light and dark variations

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_style_toggle">Toggle Sidebar Style</button>

JS Code

Dashmix.layout('sidebar_style_toggle');

Light

Sets the Sidebar to light variation

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_style_light">Light Themed Sidebar</button>

JS Code

Dashmix.layout('sidebar_style_light');

Dark

Sets the Sidebar to dark variation

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_style_dark">Dark Themed Sidebar</button>

JS Code

Dashmix.layout('sidebar_style_dark');

Side Overlay Visibility

Toggle

Opens or Closes the Side Overlay based on its current state

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_overlay_toggle">Toggle Side Overlay</button>

JS Code

Dashmix.layout('side_overlay_toggle');

Open

Opens the Side Overlay

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_overlay_open">Open Side Overlay</button>

JS Code

Dashmix.layout('side_overlay_open');

Close

Closes the Side Overlay

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_overlay_close">Close Side Overlay</button>

JS Code

Dashmix.layout('side_overlay_close');

Side Overlay Hover Mode

Toggle

Toggles the Side Overlay hover mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_overlay_mode_hover_toggle">Toggle Hover Mode</button>

JS Code

Dashmix.layout('side_overlay_mode_hover_toggle');

Enable

Enables the Side Overlay hover mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_overlay_mode_hover_on">Enable Hover Mode</button>

JS Code

Dashmix.layout('side_overlay_mode_hover_on');

Disable

Disables the Side Overlay hover mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_overlay_mode_hover_off">Disable Hover Mode</button>

JS Code

Dashmix.layout('side_overlay_mode_hover_off');

Side Scrolling

Toggle

Toggles between native and custom scrolling in Sidebar and Side Overlay

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_scroll_toggle">Toggle Side Scrolling</button>

JS Code

Dashmix.layout('side_scroll_toggle');

Native

Enables native scrolling in Sidebar and Side Overlay

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_scroll_native">Enable Native Scrolling</button>

JS Code

Dashmix.layout('side_scroll_native');

Custom

Enables custom scrolling in Sidebar and Side Overlay

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_scroll_custom">Enable Custom Scrolling</button>

JS Code

Dashmix.layout('side_scroll_custom');

Header Mode

Toggle

Toggles Header mode between static and fixed

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_mode_toggle">Toggle Header Mode</button>

JS Code

Dashmix.layout('header_mode_toggle');

Static

Sets the Header to static mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_mode_static">Static Header</button>

JS Code

Dashmix.layout('header_mode_static');

Fixed

Sets the Header to fixed mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_mode_fixed">Fixed Header</button>

JS Code

Dashmix.layout('header_mode_fixed');

Header Glass

Toggle

Toggles the Header glass variation

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_glass_toggle">Toggle Header Glass</button>

JS Code

Dashmix.layout('header_glass_toggle');

Enable

Enables the Header glass variation

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_glass_on">Enable Header Glass</button>

JS Code

Dashmix.layout('header_glass_on');

Disable

Disables the Header glass variation

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_glass_off">Disable Header Glass</button>

JS Code

Dashmix.layout('header_glass_off');

Header Styles

Toggle

Toggles Header style between light and dark variations

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_style_toggle">Toggle Header Style</button>

JS Code

Dashmix.layout('header_style_toggle');

Light

Sets the Header to light variation

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_style_light">Light Themed Header</button>

JS Code

Dashmix.layout('header_style_light');

Dark

Sets the Header to dark variation

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_style_dark">Dark Themed Header</button>

JS Code

Dashmix.layout('header_style_dark');

Footer Mode

Toggle

Toggles Footer mode between static and fixed

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="footer_mode_toggle">Toggle Footer Mode</button>

JS Code

Dashmix.layout('footer_mode_toggle');

Static

Sets the Footer to static mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="footer_mode_static">Static Footer</button>

JS Code

Dashmix.layout('footer_mode_static');

Fixed

Sets the Footer to fixed mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="footer_mode_fixed">Fixed Footer</button>

JS Code

Dashmix.layout('footer_mode_fixed');

Main Content

Toggle

Toggles between all available content layouts (boxed, narrow and full width)

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="content_layout_toggle">Toggle Content Layout</button>

JS Code

Dashmix.layout('content_layout_toggle');

Boxed

Sets the content layout to boxed

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="content_layout_boxed">Boxed Content Layout</button>

JS Code

Dashmix.layout('content_layout_boxed');

Narrow

Sets the content layout to narrow

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="content_layout_narrow">Narrow Content Layout</button>

JS Code

Dashmix.layout('content_layout_narrow');

Full Width

Sets the content layout to full width

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="content_layout_full_width">Full Width Content Layout</button>

JS Code

Dashmix.layout('content_layout_full_width');