Sidebar Option
To switch to a light sidebar, add
Preview
data-menu-color="light" to the <html> tag in your
layout. You can apply this dynamically using the layout with
setSideNavColor('light').
To switch to a gradient sidebar, add
Preview
data-menu-color="gradient" to the <html> tag in
your layout. You can apply this dynamically using the layout with
setSideNavColor('gradient').
To switch to a gray sidebar, add
Preview
data-menu-color="gray" to the <html> tag in your
layout. You can apply this dynamically using the layout with
setSideNavColor('gray').
To switch to a image sidebar, add
Preview
data-menu-color="image" to the <html> tag in your
layout. You can apply this dynamically using the layout with
setSideNavColor('image').
To switch to a compact sidebar, add
Preview
data-sidenav-size="compact" to the <html> tag in
your layout. You can apply this dynamically using the layout with
setSideNavSize('compact').
To switch to a sidebar with icon, add
Preview
data-sidenav-size="condensed" to the <html> tag in
your layout. You can apply this dynamically using the layout with
setSideNavSize('condensed').
To switch to a on hover active sidebar, add
Preview
data-sidenav-size="on-hover-active" to the
<html> tag in your layout. You can apply this dynamically using
the layout with setSideNavSize('on-hover-active').
To switch to a offcanvas sidebar, add
Preview
data-sidenav-size="offcanvas" to the <html> tag in
your layout. You can apply this dynamically using the layout with
setSideNavSize('offcanvas').
If you want to display a line with each menu item, add the class
Preview
"sidebar-no-icons sidebar-with-line" to the
<html> tag. You can apply this dynamically using
toggleAttribute('class', 'sidebar-no-icons sidebar-with-line').
If you want to display a line with each menu item, add the class
Preview
"sidebar-with-line" to the <html> tag. You can
apply this dynamically using
toggleAttribute('class', 'sidebar-with-line').