Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

Start learning

Navbar

Step 1 - prepare index.html file

Let's remove unnecessary code so we have a place for our new project.

Below the opening <body> tag you will find the comment Start your project here and above the closing </body> tag End your project here. In between is the code with the MDB welcome message:

<!-- Start your project here-->
<div class="container">
  <div class="d-flex justify-content-center align-items-center" style="height: 100vh">
    <div class="text-center">
      <img
        class="mb-4"
        src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
        style="width: 250px; height: 90px"
      />
      <h5 class="mb-3">Thank you for using our product. We're glad you're with us.</h5>
      <p class="mb-3">MDB Team</p>
      <a
        class="btn btn-primary btn-lg"
        href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/"
        target="_blank"
        role="button"
        >Start MDB tutorial</a
      >
    </div>
  </div>
</div>
<!-- End your project here-->

Remove it and save the file. You should see a completely blank, white screen.

Step 2 - prepare the basic structure

The same as with the previous projects, our blog also needs a basic structure to keep the code organized.

Add the following code to your index.html file:

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

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

<!--Main layout-->
<main>
  <div class="container">

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

<!--Footer-->
<footer>

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

After saving the file you will still see a blank page. This is fine, because the structure we added doesn't have any elements to render yet.

Step 3 - add navbar

Go to the navbar documentation page and copy the code of the basic example. Then paste it into the index.html file, inside of the <header> section.

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

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary">
      <!-- Container wrapper -->
      <div class="container-fluid">
        <!-- Toggle button -->
        <button
          data-mdb-collapse-init
          class="navbar-toggler"
          type="button"
          data-mdb-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <i class="fas fa-bars"></i>
        </button>

        <!-- Collapsible wrapper -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <!-- Navbar brand -->
          <a class="navbar-brand mt-2 mt-lg-0" href="#">
            <img
              src="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp"
              height="15"
              alt="MDB Logo"
              loading="lazy"
            />
          </a>
          <!-- Left links -->
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="#">Dashboard</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Projects</a>
            </li>
          </ul>
          <!-- Left links -->
        </div>
        <!-- Collapsible wrapper -->

        <!-- Right elements -->
        <div class="d-flex align-items-center">
          <!-- Icon -->
          <a class="text-reset me-3" href="#">
            <i class="fas fa-shopping-cart"></i>
          </a>

          <!-- Notifications -->
          <div class="dropdown">
            <a
              data-mdb-dropdown-init
              class="text-reset me-3 dropdown-toggle hidden-arrow"
              href="#"
              id="navbarDropdownMenuLink"
              role="button"
              aria-expanded="false"
            >
              <i class="fas fa-bell"></i>
              <span class="badge rounded-pill badge-notification bg-danger">1</span>
            </a>
            <ul
              class="dropdown-menu dropdown-menu-end"
              aria-labelledby="navbarDropdownMenuLink"
            >
              <li>
                <a class="dropdown-item" href="#">Some news</a>
              </li>
              <li>
                <a class="dropdown-item" href="#">Another news</a>
              </li>
              <li>
                <a class="dropdown-item" href="#">Something else here</a>
              </li>
            </ul>
          </div>
          <!-- Avatar -->
          <div class="dropdown">
            <a
              data-mdb-dropdown-init
              class="dropdown-toggle d-flex align-items-center hidden-arrow"
              href="#"
              id="navbarDropdownMenuAvatar"
              role="button"
              aria-expanded="false"
            >
              <img
                src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp"
                class="rounded-circle"
                height="25"
                alt="Black and White Portrait of a Man"
                loading="lazy"
              />
            </a>
            <ul
              class="dropdown-menu dropdown-menu-end"
              aria-labelledby="navbarDropdownMenuAvatar"
            >
              <li>
                <a class="dropdown-item" href="#">My profile</a>
              </li>
              <li>
                <a class="dropdown-item" href="#">Settings</a>
              </li>
              <li>
                <a class="dropdown-item" href="#">Logout</a>
              </li>
            </ul>
          </div>
        </div>
        <!-- Right elements -->
      </div>
      <!-- Container wrapper -->
    </nav>
    <!-- Navbar -->

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

Remember that we are now using the Vite starter, and therefore ES modules. As you remember from previous lessons, in this case we also need to copy the JavaScript code and insert it into the src/js/main.js file to initialize the components.

Insert the code below the imports already existing in the main.js file:

import '../scss/styles.scss';
import * as mdb from 'mdb-ui-kit'; // lib
window.mdb = mdb;

// Initialization for ES Users
import { Dropdown, Collapse, initMDB } from "mdb-ui-kit";

initMDB({ Dropdown, Collapse });

Save the files. You should see the navigation bar.

Step 4 - adjust the navbar

Now we have to customize the default navbar so it looks like the one from the final demo.

We will:

  • Change the logo using icons available in MDB

  • Change the links

  • Change the icons on the right side

  • Change the color of the links and shadow of the navbar

Note: We've been learning about all these things in previous tutorials. I'm assuming you've followed them all, so I won't go into the details to avoid repeating myself.

However, if something is unclear to you, I suggest you repeat the knowledge from previous lessons or write to me on twitter.

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

  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary shadow-2">
    <!-- Container wrapper -->
    <div class="container-fluid">
      <!-- Toggle button -->
      <button class="navbar-toggler" type="button" data-mdb-collapse-init
        data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
        aria-label="Toggle navigation">
        <i class="fas fa-bars"></i>
      </button>

      <!-- Collapsible wrapper -->
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <!-- Logo -->
          <a class="navbar-brand me-2 d-none d-lg-inline-block" href="#"><i
              class="fas fa-globe-europe text-primary"></i></a>

          <li class="nav-item fw-bold">
            <a class="nav-link" href="#!">Start here</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#!">Articles</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#!">eBooks</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#!">About me</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#!">Newsletter</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#!">Contact</a>
          </li>
        </ul>


      </div>
      <!-- Collapsible wrapper -->

      <ul class="navbar-nav flex-row">
        <!-- Icons -->
        <li class="nav-item">
          <a class="nav-link pe-2" href="#!">
            <i class="fab fa-youtube"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-2" href="#!">
            <i class="fab fa-facebook-f"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-2" href="#!">
            <i class="fab fa-twitter"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link ps-2" href="#!">
            <i class="fab fa-instagram"></i>
          </a>
        </li>
      </ul>

    </div>
    <!-- Container wrapper -->
  </nav>
  <!-- Navbar -->

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

After saving the file you should see the navbar like this:

There is only one thing we did differently from previous lessons. This time, the icons on the right side have been taken out of the collapsible wrapper so that they are visible on the mobile version without having to click on the "hamburger menu".

Demo and source code for this lesson
John Doe

About author

Michal Szymanski
@ascensus_mdb

Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.