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
useLayout
with
setPosition('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
useLayout with
setOrientation('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
<BContainer fluid> and place your main content inside
<BContainer 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
useLayout with
setWidth('boxed') and setSideNavSize('on-hover') respectively.
Boxed Layout: The body width is fixed at 1340px, centering the content with surrounding margins.
Boxed Layout Preview