Bootstrap 5 Navbar Dropdown Issue
When attempting to implement a responsive navigation menu using Bootstrap 5, users may encounter an issue where the dropdown button or menu item does not function as intended. This issue can arise even when jQuery is included in the project.
Cause
In Bootstrap 5, the data-* attributes for JavaScript plugins have changed. Previously, data-toggle and data-target were used, but in Bootstrap 5, they have been replaced with data-bs-toggle and data-bs-target respectively.
Solution
To resolve the issue, replace the old data- attributes with the new data-bs- attributes:
<button>
Additional Considerations
Besides the change in data-* attributes, Bootstrap 5 also introduces other changes. For example, the ml-auto and mr-auto classes have been replaced with ms-auto and me-auto.
Demo
This code snippet demonstrates the functioning dropdown button:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
</head>
<body>
<nav>The above is the detailed content of Why isn't my Bootstrap 5 navbar dropdown working even with jQuery?. For more information, please follow other related articles on the PHP Chinese website!