Responsive Layout
Learn how to build fully responsive layouts

Choosing a Layout

Most of the time, the first task when building a dashboard, is choosing and preparing the layout along with the navigation menus, Nile Dashboard makes building a layout very easy. Browse prepared layouts or simply build your own using the previewer from the Layout Component page.

In this guide we will go with a layout that has a navbar, left side navigation and the main content. Once you have your layout of choice, our objective is to have the following structure within our project directory (other files omitted for brevity):

  • folder acme-dashboard
    • folder assets
      • folder js
        • description app.js
    • folder pages
      • folder .partials
        • description layout.html
        • description sidenav.html
        • description navbar.html
      • description index.html

In this guide we will go through and write each file outlined above until we have a responsive reusable layout through out our dashboard.

layout.html

The following is the source code of our layout of choice, along with <partial> tags for using the sidenav and navbar, and the <content> which is replaced with the contents of each page that uses the following layout

<div class="layout-wrapper layout-content-horizontal">
    <!-- Navbar : Start -->
    <div class="min-h-56px">
        <partial src="/navbar.html"></partial>
    </div>
    <!-- Navbar : End -->

    <!-- Content : Start -->
    <div class="layout-content layout-content-vertical">
        <!-- Left Side Navigation : Start -->
        <partial src="/sidenav.html"></partial>
        <!-- Left Side Navigation : End -->

        <!-- Inner Content : Start -->
        <div class="layout-content">
            <content></content>
        </div>
        <!-- Inner Content : End -->
    </div>
    <!-- Content : End -->
</div>

sidenav.html

Same with Layouts and Navbar, go to the Side Navigation component page and build your own version of the side navigation then copy and use that within our sidenav.html partial

<div id="sidenav" class="sidenav layout-content-fit bg-base-2" data-sn-width="278">
  <!-- .sn-wrap sub element of the side navigation is REQUIRED -->
  <div class="sn-wrap h-100">
    <!-- You can use the Side Menu component here... -->
  </div>
</div>

The highlighted data-sn-width attribute should be defined with the desired width of your side navigation.

app.js

The Side Navigation component requires javascript initialization, we should place that init code within our /assets/js/app.js file:

new Sidenav('#sidenav', {
  "trigger": ".sidenav-toggle",
  "triggerMode": "toggle",
  "drawerBreakpoint": 768
});

the drawerBreakpoint option will automatically hide the side navigation when the canvas width is lower than 768 and the trigger option defines the selector button that will trigger the side navigation as a drawer.

Using our layout

At this point, we have our layout as a partial and is ready to be reused within our HTML pages, below is how easy it is to use the layout we prepared

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Dashboard</title>
</head>
<body>
    <partial src="/layout.html">
        <!-- Place your components here -->
    </partial>
</body>
</html>

Next Up

Learn more about the build tool and how it boosts your development and how to prepare your final package for production.
Learn how to customize your bundle further and enable certain components for all or some pages.

{title}