Sign in


Sign up


Admin dashboard – lesson 1

by Michal Szymanski,

MDB Pro required

This lesson requires MDB Pro package. If you use MDB Free version some elements might not work as expected.

Get MDB PRO

Step 1 - basic structure

Similarly to the previous tutorial, at the beginning, we'll create a basic structure of our project.

Open index.html file in your project folder (the folder where you have unzipped MDB package) and paste the following code below body tag:


    <!--Main Navigation-->
<header>

</header>
<!--Main Navigation-->

<!--Main layout-->
<main>

</main>
<!--Main layout-->

<!--Footer-->
<footer>

</footer>
<!--Footer--> 
              

Step 2 - side navigation

Go to the JavaScript/SideNav documentation, copy the code of Basic Example and paste it between the header tags:


    <!--Main Navigation-->
<header>

  <!-- SideNav slide-out button -->
  <a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse">
      <i class="fa fa-bars"></i>
  </a>

  <!-- Sidebar navigation -->
  <div id="slide-out" class="side-nav fixed">
      <ul class="custom-scrollbar list-unstyled">
          <!-- Logo -->
          <li>
              <div class="logo-wrapper waves-light">
                  <a href="#">
                      <img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center">
                  </a>
              </div>
          </li>
          <!--/. Logo -->
          <!--Social-->
          <li>
              <ul class="social">
                  <li>
                      <a href="#" class="icons-sm fb-ic">
                          <i class="fa fa-facebook"> </i>
                      </a>
                  </li>
                  <li>
                      <a href="#" class="icons-sm pin-ic">
                          <i class="fa fa-pinterest"> </i>
                      </a>
                  </li>
                  <li>
                      <a href="#" class="icons-sm gplus-ic">
                          <i class="fa fa-google-plus"> </i>
                      </a>
                  </li>
                  <li>
                      <a href="#" class="icons-sm tw-ic">
                          <i class="fa fa-twitter"> </i>
                      </a>
                  </li>
              </ul>
          </li>
          <!--/Social-->
          <!--Search Form-->
          <li>
              <form class="search-form" role="search">
                  <div class="form-group waves-light">
                      <input type="text" class="form-control" placeholder="Search">
                  </div>
              </form>
          </li>
          <!--/.Search Form-->
          <!-- Side navigation links -->
          <li>
              <ul class="collapsible collapsible-accordion">
                  <li>
                      <a class="collapsible-header waves-effect arrow-r">
                          <i class="fa fa-chevron-right"></i> Submit blog
                          <i class="fa fa-angle-down rotate-icon"></i>
                      </a>
                      <div class="collapsible-body">
                          <ul>
                              <li>
                                  <a href="#" class="waves-effect">Submit listing</a>
                              </li>
                              <li>
                                  <a href="#" class="waves-effect">Registration form</a>
                              </li>
                          </ul>
                      </div>
                  </li>
                  <li>
                      <a class="collapsible-header waves-effect arrow-r">
                          <i class="fa fa-hand-pointer-o"></i> Instruction
                          <i class="fa fa-angle-down rotate-icon"></i>
                      </a>
                      <div class="collapsible-body">
                          <ul>
                              <li>
                                  <a href="#" class="waves-effect">For bloggers</a>
                              </li>
                              <li>
                                  <a href="#" class="waves-effect">For authors</a>
                              </li>
                          </ul>
                      </div>
                  </li>
                  <li>
                      <a class="collapsible-header waves-effect arrow-r">
                          <i class="fa fa-eye"></i> About
                          <i class="fa fa-angle-down rotate-icon"></i>
                      </a>
                      <div class="collapsible-body">
                          <ul>
                              <li>
                                  <a href="#" class="waves-effect">Introduction</a>
                              </li>
                              <li>
                                  <a href="#" class="waves-effect">Monthly meetings</a>
                              </li>
                          </ul>
                      </div>
                  </li>
                  <li>
                      <a class="collapsible-header waves-effect arrow-r">
                          <i class="fa fa-envelope-o"></i> Contact me
                          <i class="fa fa-angle-down rotate-icon"></i>
                      </a>
                      <div class="collapsible-body">
                          <ul>
                              <li>
                                  <a href="#" class="waves-effect">FAQ</a>
                              </li>
                              <li>
                                  <a href="#" class="waves-effect">Write a message</a>
                              </li>
                              <li>
                                  <a href="#" class="waves-effect">FAQ</a>
                              </li>
                              <li>
                                  <a href="#" class="waves-effect">Write a message</a>
                              </li>
                              <li>
                                  <a href="#" class="waves-effect">FAQ</a>
                              </li>
                              <li>
                                  <a href="#" class="waves-effect">Write a message</a>
                              </li>
                              <li>
                                  <a href="#" class="waves-effect">FAQ</a>
                              </li>
                              <li>
                                  <a href="#" class="waves-effect">Write a message</a>
                              </li>
                          </ul>
                      </div>
                  </li>
              </ul>
          </li>
          <!--/. Side navigation links -->
      </ul>
  </div>
  <!--/. Sidebar navigation -->

</header>
<!--Main Navigation-->
              

After saving the file and refreshing the browser you will notice an impressive dark navigation on the left side.

Resize browser window to the mobile size and the SideNav disappears. The problem is the hamburger button which should trigger SideNav and makes it visible doesn't work.

That's because we have to initialize it first.

Initialization means calling the proper javascript function.

Step 3 - SideNav initialization

In the scripts section (at the bottom of the document), below MDB files, place the following code:


    <!-- Initializations -->
<script>
  // SideNav Initialization
  $(".button-collapse").sideNav();
</script>
              

Save the file and refresh the browser. Now the hamburger button should work as expected.

Step 4 - Navbar

Admin dashboards are complicated constructions because they have to manage multiple functionalities and data.

That's why they require an advanced navigation.

We usually use so-called "double navigation" - the connection of SideNav and Navbar.

In our current project, we already have the SideNav. Now we'll take care of Navbar.

But first remove the code of Slide-out button. We don't need it, because we'll manage the SideNav other way.

Remove it:


    <!-- SideNav slide-out button -->
<a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse">
  <i class="fa fa-bars"></i>
</a>
              

Now go to Components/Navbar documentation and copy the code of Basic Example.

Then place it above the SideNav:


    <!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark indigo">

    <!-- Navbar brand -->
    <a class="navbar-brand" href="#">Navbar</a>

    <!-- Collapse button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
        aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <!-- Links -->
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>

            <!-- Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>

        </ul>
        <!-- Links -->

        <!-- Search form -->
        <form class="form-inline">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        </form>
    </div>
    <!-- Collapsible content -->

</nav>
<!--/.Navbar-->
              

Save the file and refresh the browser. You will notice the SideNav covers the left part of the Navbar.

SideNav has fixed position. That means it will be always visible in the same place over any other content.

In order to resolve the resulting problems, we have to set a right padding to main, header and footer. Thanks to that any content inside these elements will be pushed out of the scope of the SideNav.

The SideNav is 240 px wide, so we have to add padding-right: 240 px to the main, header and footer.

We could do it via CSS but thanks to MDB it's much easier.

Add .fixed-sn class to the body element and .double-nav class to the .navbar.


    <body class="fixed-sn">
                              

    <nav class="navbar navbar-expand-lg navbar-dark indigo double-nav">
                

Save the file and refresh the browser. There are still a few things to improve, but our double navigation works as expected.

Step 5 - Footer

The last thing we'll create in this lesson is footer.

Go to components/footer documentation and copy the code of Basic Footer. Then paste it below main section.

Then remove the entire code between <!--Footer Links--> comments and leave only .footer-copyright element. Finally the footer should looks like that:


    <!--Footer-->
<footer class="page-footer blue center-on-small-only">

    <!--Copyright-->
    <div class="footer-copyright">
        <div class="container-fluid">
            © 2015 Copyright:
            <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>

        </div>
    </div>
    <!--/.Copyright-->

</footer>
<!--/.Footer-->
                

If something doesn’t work as expected, you can download a final code for this lesson here:

Download Live preview Next lesson

Do you want to share?

Facebook Twitter Google +

About author


User avatar

Michal Szymanski

Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst.

Leave a reply

BrandFlow - Marketing Automation for Bootstrap

Powerful and free software which will automate your Bootstrap project.

Modals creator, scoring system, tag manager & analytics dashboard included in one tool.

Created by MDB Team.

Learn more