Bootstrap navbar examples with dropdown

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. how to create navbar dropdown in bootstrap with code example.

The .dropdown class indicates a dropdown menu.

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute.

Add the .dropdown-menu class to a <div> element to actually build the dropdown menu. Then add the .dropdown-item class to each element (links or buttons) inside the dropdown menu.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Define its class name

This article will guide you to adding navbar dropdown in Bootstrap with example.

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Step 2: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<!-- Bootstrap CSS -->

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Step 4: Define its class name

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute.

<div class="container-fluid bcontent">
  <h2>Bootstrap Navbar with Dropdown Menu</h2>
  <hr />
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Tutlane</a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
          >Tutorials</a
        >
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Microsoft</a>
          <a class="dropdown-item" href="#">Html</a>
          <a class="dropdown-item" href="#">CSS</a>
          <a class="dropdown-item" href="#">Javascript</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Articles</a>
      </li>
    </ul>
  </nav>
</div>

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Navbar with Dropdown Menu Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
      .bcontent {
        margin-top: 10px;
      }
    </style>
  </head>

  <body>
    <div class="container-fluid bcontent">
      <h2>Bootstrap Navbar with Dropdown Menu</h2>
      <hr />
      <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Tutlane</a>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
              >Tutorials</a
            >
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Microsoft</a>
              <a class="dropdown-item" href="#">Html</a>
              <a class="dropdown-item" href="#">CSS</a>
              <a class="dropdown-item" href="#">Javascript</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Articles</a>
          </li>
        </ul>
      </nav>
    </div>
  </body>
</html>

Check the output of the above code example.

Bootstrap, Dropdown, Menu

All the best 👍