Scrollable Layout
To enable full scrolling and view all content, add
data-layout-position="scrollable" to the
<html> tag. You can apply this dynamically using the
useLayoutContext
with
changeLayoutPosition('scrollable').
Scrollable Layout: Both the topbar and sidebar scroll independently, ideal for long menus or fixed header content.
Scrollable Layout PreviewHorizontal Layout
To enable the horizontal layout, use
useLayoutContext with
changeOrientation('horizontal') or you can directly wrap your page with HorizontalLayout.
Horizontal Layout: Features top Navigation with menu items aligned horizontally.
Horizontal Layout PreviewCompact Layout
To use the compact layout, follow this structure: wrap your page title in
<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
To enable the boxed layout, add
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
useLayoutContext with
changeLayoutWidth('boxed') and changeSideNavSize('on-hover') respectively.
Boxed Layout: The body width is fixed at 1340px, centering the content with surrounding margins.
Boxed Layout Preview