JSFiddle - React, Tailwind, and code Playground

by Brnd13

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

<nav class="navbar navbar-expand-lg navbar-light bg-light" style="padding: 0;">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <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" href="#" id="toolsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Tools & Equipment
            </a>
            <div class="dropdown-menu mega-dropdown" aria-labelledby="toolsDropdown">
              <div class="row">
                <div class="col-md-4">
                  <h5>Tools</h5>
                  <a class="cstm-menu-link" href="#">Browse All</a>
                  <a class="cstm-menu-link" href="#">Screwdrivers</a>
                  <a class="cstm-menu-link" href="#">Spudgers</a>
                  <a class="cstm-menu-link" href="#">Suction Cups</a>
                </div>
                <div class="col-md-4">
                  <h5>Equipment</h5>
                  <a class="cstm-menu-link" href="#">Browse All</a>
                  <a class="cstm-menu-link" href="#">Pre-heating Devices</a>
                  <a class="cstm-menu-link" href="#">Mounts/Holders</a>
            ...

CSS

/* Full Width Mega Dropdown */
.mega-dropdown {
  position: fixed; /* Fixes the dropdown to the viewport */
  top: 100%; /* Position it below the navbar */
  left: 0; /* Align with the left edge of the screen */
  right: 0; /* Align with the right edge of the screen */
  width: 100vw; /* Make the dropdown span the full width */
  padding: 1rem;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1050;
  display: none; /* Hidden by default */
}
.cstm-menu-link{
display:block;
}

/* Display dropdown on hover */
.nav-item.dropdown:hover .mega-dropdown {
  display: block;
}

/* The row within the mega dropdown */
.mega-dropdown .row {
  margin: 0; /* Remove margin */
  width: 100%; /* Ensure it spans the full width */
  display: flex; /* Make sure the columns align properly */
}

/* Adjust padding for each column */
.mega-dropdown .row .col-md-4 {
  padding: 15px; /* Adjust padding for spacing between columns */
}

/* Remove the default margins and paddings of links */
.mega-dropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-dropdown ul li a {
  display: block;
  color: #007bff;
  text-decoration: none;
  padding: 0.5rem 0;
}

.mega-dropdown ul li a:hover {
  text-decoration: underline;
}

/* Remove any borders for a clean look */
.navbar-nav .dropdown-menu {
  padding: 0;
  margin-top: 0;
  border: none;
}