Layout API

There are various layouts that you can mix together. To make it easy, all layout can be applied by 2 ways: with a data-toggle attribute or direclty with a function.

For example, in your page, you can add a link or a button with data-toggle="rtl" attribute. On click, this will toggle RTL layout.

List of functions and data-toggle attribute

Layout Action Function Example with data-toggle
Allow you to switch sidebar right to left (RTL).
By default, sidebar is on left side.
TOGGLE toggleRTL()
<a href="#" data-toggle="rtl">Toggle RTL</a>
ENABLE enableRTL()
DISABLE disableRTL()
Sidebar Fixed / Fluid
Sidebar will scroll with content if fluid.
It will not moved if fixed.
TOGGLE toggleSidebar()
<a href="#" data-toggle="sidebar-behaviour">Toggle Sidebar Behaviour</a>
FIXED handleSidebarFixed()
FLUID handleSidebarFluid()
Topbar Fixed / Fluid
Topbar will scroll with content if fluid.
It will not moved if fixed.
TOGGLE toggleTopbar()
<a href="#" data-toggle="topbar">Toggle Topbar Behaviour</a>
FIXED handleTopbarFixed()
FLUID handleTopbarFluid()
Submenu on Hover
Sidebar submenu can be shown on the side of sidebar on mouse hover.
By default, submenu show below each menu element in sidebar on click.
TOGGLE toggleSubmenuHover()
<a href="#" data-toggle="submenu-hover">Toggle Submenu Hover</a>
ENABLE createSubmenuHover()
DISABLE removeSubmenuHover()
Sidebar on Top
You can put sidebar at the top of the page, instead of in left or right side.
By default, sidebar is on left side.
TOGGLE toggleSidebarTop()
<a href="#" data-toggle="sidebar-top">Toggle Sidebar Top</a>
ENABLE createSidebarTop()
DISABLE removeSidebarTop()
Sidebar on Hover
Sidebar can always be completly hidden. It will be appear if you put your mouse in the corner of your screen.
By default, sidebar is visible (for screen > 1024px).
TOGGLE toggleSidebarHover()
<a href="#" data-toggle="sidebar-hover">Toggle Sidebar Hover</a>
ENABLE createSidebarHover()
DISABLE removeSidebarHover()
Boxed Layout
It's possible to have a centered admin with max 1200px.
By default, template is full size (100% of the page).
TOGGLE toggleboxedLayout()
<a href="#" data-toggle="boxed">Toggle Boxed</a>
ENABLE createBoxedLayout()
DISABLE removeBoxedLayout()
Sidebar Collapsed
You can collapse sidebar with icon on topbar, but you can also control it from other element too.
By default, sidebar is large.
TOGGLE collapsedSidebar()
<a href="#" data-toggle="sidebar-collapsed">Toggle Collapsed Sidebar</a>
ENABLE createCollapsedSidebar()
DISABLE removeCollapsedSidebar()