How do I create multilevel dropdowns in Bootstrap 4?

Multilevel Dropdowns in Bootstrap 4

When working with Bootstrap 4, incorporating multilevel dropdowns within navigation bars can sometimes pose a challenge. However, with a combination of CSS and JavaScript, creating these dropdowns is relatively straightforward.

CSS for Multilevel Dropdowns

To achieve multilevel dropdowns, additional CSS classes are introduced:

• .dropdown-submenu: This class is applied to the parent menu item that contains the sub-dropdown.
• .dropdown-menu: This class is applied to the sub-dropdown.
• .dropdown-item: This class is applied to all items within the sub-dropdown.

The following CSS rules define the styles for these elements:

JavaScript for Multilevel Dropdowns

To handle the toggling of sub-dropdowns, the following JavaScript code is employed:

This code attaches an event listener to any item within the sub-dropdown that has the class dropdown-toggle. When an item is clicked, it toggles the show class on the sub-dropdown, ensuring that only one sub-dropdown is open at a time.

Integration with HTML

In your HTML code, simply add the necessary classes for multilevel dropdowns, as seen in this example:

Utilizing these CSS rules and JavaScript, you can effortlessly create multilevel dropdowns within navigation bars in Bootstrap 4, providing a user-friendly and intuitive navigation experience.

The above is the detailed content of How do I create multilevel dropdowns in Bootstrap 4?. For more information, please follow other related articles on the PHP Chinese website!