Scrollable Layout
data-layout-position="scrollable" to the
<html> tag. You can apply this dynamically using the
LayoutStoreService
with
setLayoutPosition('scrollable').
Scrollable Layout: Both the topbar and sidebar scroll independently, ideal for long menus or fixed header content.
Scrollable Layout PreviewHorizontal Layout
LayoutStoreService with
setLayoutOrientation('horizontal') or you can directly wrap your page with HorizontalLayoutComponent.
Horizontal Layout: Features top Navigation with menu items aligned horizontally.
Horizontal Layout PreviewCompact Layout
<div class="container-fluid"> and place your main content inside
<div class="container-xl">. This ensures proper spacing and alignment.
Compact Layout: Page content width is constrained within a container for a cleaner, narrower layout.
Compact Layout PreviewBoxed Layout
data-layout-width="boxed" to the
<html> tag. For optimal spacing and usability, we also recommend adding
data-sidenav-size="on-hover" to make the sidebar compact while keeping more room for
content. You can apply this dynamically using the
LayoutStoreService with
setLayoutWidth('boxed') and setSidenavSize('on-hover') respectively.
Boxed Layout: The body width is fixed at 1340px, centering the content with surrounding margins.
Boxed Layout PreviewPreloader Layout
LayoutStoreService with
setIsLoading(true).
Preloader Layout: Displays a loading animation before the main content appears, enhancing the user experience during initial page load or content fetching.
Preloader Layout Preview