Dropdown menu doesnt work


Topic: Dropdown menu doesnt work

*Expected behavior*Dropdown menu (in navbar) should work.

*Actual behavior*Dropdown menu (in navbar) doesnt work. Neither local, neither in examples.

Resources (screenshots, code snippets etc.)https://mdbootstrap.com/snippets/standard/mdbootstrap/2949558?view=side#https://mdbootstrap.com/snippets/standard/mdbootstrap/2949576?view=side#https://mdbootstrap.com/snippets/standard/mdbootstrap/2949581?view=side#

Code from Navbar page (https://mdbootstrap.com/docs/standard/navigation/navbar/) works:

<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary">
        <div class="container-fluid">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a
                data-mdb-dropdown-init
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdownMenuLink"
                role="button"
                aria-expanded="false"
              >
                Dropdown link
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <li>
                  <a class="dropdown-item" href="#">Action</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Another action</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Something else here</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>

Code from Navbar Generatior (https://mdbootstrap.com/docs/standard/tools/builders/navbar/) - doesnt work:

<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-light navbar-light">
    <!-- Container wrapper -->
    <div class="container-fluid">
      <!-- Navbar brand -->
      <a class="navbar-brand" href="#">Brand</a>

      <!-- Toggle button -->
      <button
        class="navbar-toggler"
        type="button"
        data-mdb-toggle="collapse"
        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">
          <!-- Link -->
          <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
          <!-- Dropdown -->
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="navbarDropdown"
              role="button"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>

        <!-- Icons -->
        <ul class="navbar-nav d-flex flex-row me-1">
          <li class="nav-item me-3 me-lg-0">
            <a class="nav-link" href="#"><i class="fas fa-shopping-cart"></i></a>
          </li>
          <li class="nav-item me-3 me-lg-0">
            <a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
          </li>
        </ul>
        <!-- Search -->
        <form class="w-auto">
          <input
            type="search"
            class="form-control"
            placeholder="Type query"
            aria-label="Search"
          />
        </form>
      </div>
    </div>
    <!-- Container wrapper -->
  </nav>
  <!-- Navbar -->

Kamila Pieńkowska staff answered 2 months ago

Examples from extended documentation may not work as they are not part of core documentation and may not be updated to newer version of MDB package.

All of those should work if you change init attributes according to migration guide: https://mdbootstrap.com/docs/standard/getting-started/migration-guide/#section-free-components-initialization


Vasiliy commented 2 months ago

Can you tell me when all the documentation will be updated to 8 version?


Kamila Pieńkowska staff answered 2 months ago

Just to highlight: the extended documentation isn't a part of the core documentation & core product.

The core documentation gets updated right away, with every release.

Extended documentation is often just a mix of core documentation examples, or a very specific implementation. So you should be able to achieve any result included in the Extended Documentation simply by mixing some core docs examples.

As to the date of update - the Extended Documentation is updated continuously based on demand. If you need a specific example to be updated right away - let us know.

Otherwise, the entirety of extended docs should be updated within 2-3 months.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 8.0.0
  • Device: MacBook Air M1
  • Browser: Chrome
  • OS: MacOS Sequoia
  • Provided sample code: No
  • Provided link: Yes