Layouts The layout component provides a wide range set of different layouts from fluid and fixed to detached.
Enable Component
Enable the layout component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                layout: true // Enable layout component
            }
        }
    }
}
Basic Usage
You can explore and choose from 12 different layouts or build your own layout.
<div class="layout-wrapper layout-content-horizontal">
    <!-- Navbar -->
    <div class="min-h-56px"></div>

    <!-- Content Wrapper -->
    <div class="layout-content layout-content-vertical">
        <!-- Side Navigation -->
        <div class="layout-content-fit min-w-256px"></div>

        <!-- Inner Content -->
        <div class="layout-content"></div>
    </div>
</div>
Fully Responsive Layouts

Layouts with side navigations by default are not responsive, in order to achieve fully responsive layouts, your layout must use the Side Navigation component.

that component provides a wide range of features that enables you to toggle side navigations visibility on certain breakpoints and thus achieve responsive layouts.

Layout Features
Basic layout features that are primarily implemented by Bootstrap are available by default within Nile Dashboard
Side navigations in the following layout previewer must actually use the Side Navigation component in order to achieve fully responsive layouts.
NameDescription
.layout-wrapperThe base element of the entire layout
.layout-wrapper.layout-relativeApplies whole window scrolling behaviour
.layout-wrapper > .layout-contentA growing content area with horizontally stacked sub-elements
.layout-wrapper > .layout-content-fitA contained content area with horizontally stacked sub-elements
.layout-wrapper > .layout-horizontal-contentStacks sub-elements horizontally using flex-direction: column
.layout-wrapper > .layout-content-verticalStacks sub-elements vertically using flex-direction: row
.layout-wrapper > .layout-content-stickyMake a content area sticky using position: sticky; requires .layout-relative to be applied to .layout-wrapper

{title}