Topic: Dropdown menu doesnt work
Василий Киреев asked 2 months ago
*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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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