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
LayoutStoreService 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
LayoutStoreService 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
LayoutStoreService 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
LayoutStoreService 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
LayoutStoreService 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
LayoutStoreService 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
LayoutStoreService 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
LayoutStoreService 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 the
LayoutStoreService with
setHtmlAttribute('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 the
LayoutStoreService with
setHtmlAttribute('class', 'sidebar-with-line').