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
useLayoutContext with
changeSideNavColor('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
useLayoutContext with
changeSideNavColor('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
useLayoutContext with
changeSideNavColor('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
useLayoutContext with
changeSideNavColor('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
useLayoutContext with
changeSideNavSize('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
useLayoutContext with
changeSideNavSize('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
useLayoutContext with
changeSideNavSize('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
useLayoutContext with
changeSideNavSize('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').