Bootstrap 5 dropdown toggle displaying incorrect menu

I am currently working on a website project using Bootstrap 5. In the navigation bar of my site, I have implemented a dropdown menu with multiple submenus that dropend.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07656868737473756677473229372935">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f0fdfde6e1e6e0f3e2d2a7bca2bca0">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item dropdown" data-bs-toggle="dropdown" id="route-4" aria-haspopup="true" aria-expanded="false">
          <a class="nav-link dropdown-toggle" href="#">Categories</a>
          <ul class="dropdown-menu" aria-labelledby="route-4">
            <li class="nav-item dropdown-item dropdown dropend" data-bs-toggle="dropdown" id="route-5" aria-haspopup="true" aria-expanded="false">
              <a class="nav-link py-0" href="#">Category 1</a>
              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="route-5">
                <li class="nav-item dropdown-item"><a class="nav-link py-0" href="#">Subcategory 1</a></li>
                <li class="nav-item dropdown-item"><a class="nav-link py-0" href="#">Subcategory 2</a></li>

              </ul>
            </li>
            <li class="nav-item dropdown-item dropdown dropend" data-bs-toggle="dropdown" id="route-9" aria-haspopup="true" aria-expanded="false">
              <a class="nav-link py-0" href="#">Category 2</a>
              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="route-9">
                <li class="nav-item dropdown-item"><a class="nav-link py-0" href="#">Subcategory 1</a></li>
                <li class="nav-item dropdown-item"><a class="nav-link py-0" href="#">Subcategory 2</a></li>

              </ul>
            </li>

          </ul>
        </li>
      </ul>

    </div>
  </div>
</nav>

The issue I am facing is that when I toggle any category, only the first subcategory menu toggles. I have attempted to use data-bs-target but it did not resolve the problem.

Just to provide some context, I used npm to install Bootstrap for this project.

Is there anyone who can assist me with this?

htmlcssbootstrap-5

Answer №1

Bootstrap 5 has simplified the usage of nested dropdowns by eliminating the need for the data-bs-toggle="dropdown" and id attributes. Proper nesting and classes now handle the behavior effectively. To ensure the proper functionality of nested dropdowns, each dropdown link within the <a> tag should directly toggle its own .dropdown-menu.

<li class="nav-item dropdown">
   <a class="nav-link dropdown-toggle" href="#" id="categoriesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      Categories
   </a>
   <ul class="dropdown-menu" aria-labelledby="categoriesDropdown">
      <!-- Category 1 Dropend -->
      <li class="dropdown dropend">
         <a class="dropdown-item dropdown-toggle" href="#" id="category1Dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Category 1
         </a>
         <ul class="dropdown-menu" aria-labelledby="category1Dropdown">
            <li><a class="dropdown-item" href="#">Subcategory 1</a></li>
            <li><a class="dropdown-item" href="#">Subcategory 2</a></li>
            <!-- More subcategories as needed -->
         </ul>
      </li>
      <!-- Category 2 Dropend -->
      <li class="dropdown dropend">
         <a class="dropdown-item dropdown-toggle" href="#" id="category2Dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Category 2
         </a>
         <ul class="dropdown-menu" aria-labelledby="category2Dropdown">
            <li><a class="dropdown-item" href="#">Subcategory 1</a></li>
            <li><a class="dropdown-item" href="#">Subcategory 2</a></li>
            <!-- More subcategories as needed -->
         </ul>
      </li>
      <!-- Add more categories as needed -->
   </ul>
</li>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Which is better: Starting with rows or columns in Bootstrap 4 layout design?

Many Bootstrap 4 grid layout demos feature columns within rows, but is it considered improper to have rows within columns? For example: <div class="col col-md-6"> <div class="row"> </div> </div> ...

htmlcssbootstrap-4

Initialization of webix combo options values in HTML code

Currently, I am working with the Webix UI framework and I am trying to achieve something similar to: <div view="combo" options="fruit"></div> This is what I have in my JavaScript file: $scope.fruit =[{id:1, value: "Apple"}, {id:2, value: "Ba ...

javascripthtmlwebix

Is it possible to use a hyperlink in Node.js to transmit information to an API using an Express request?

I am working on an HTML page where I need to send data to an API when a specific link is clicked. To achieve this, I am using Express along with a form that has a POST method. Here is the link: <form action="/bx/processed-manually" method=&qu ...

htmlnode.jsformsapiexpress

Guide to updating Django model-based form records with choices option using an HTML form

I have a pre-existing model called ShiftChange that I am trying to update. In the model-based form, I have used CHOICES as follows: from django.db import models ====== ============= ) class ShiftChange(models.Model): ...

htmlpython-3.xdjangodjango-formsdjango-templates

The Chrome browser's default stylesheet is overriding the styles of my website

I'm experiencing an issue with the CSS styling on one of my website pages. Here is the CSS code for formatting links: a:link, a:visited, a:active { color: white; text-decoration: none; font-weight: bold; } However, despite these styles, ...

htmlruby-on-railscssgoogle-chromeweb

Is there a way to disable the feature of saving input values?

I am dealing with an input field that looks like this: <input name="username" placeholder="Email" type="email" autocomplete="off" /> Even though I have set the autocomplete attribute to off, the previous value still appears when I open the page: h ...

htmlcssinputbrowser-cache

The back-to-top button guides users back to their last visited page

I'm excited to explore AngularJS and I want to add two "return to top" buttons on different pages. Here's what I have so far: Page 1: <h1 id = "top"> .......... <a href="#top" target = "_self">Return to Top</a> Page ...

javascripthtmlangularjsangularjs-scopehref

Internet Explorer experiencing printing issues

Can anyone explain why IE (8,9 Tested) is refusing to print the right side of this coupon on the red background? The left side (phone number) prints fine. Other browsers like Chrome and Firefox print the whole document correctly. To see the bug, you can ...

cssinternet-explorerprinting

How can I turn off the responsive font sizes in bootstrap 5?

How can I turn off RFS in Bootstrap 5 easily? I attempted: $font-size-base: 1.6rem; $font-size-lg: $font-size-base; $font-size-sm: $font-size-base; However, it seems like reboot.scss is overriding it. ...

twitter-bootstrapbootstrap-5

Conceal the second click action within the anchor tag

Is there a way to hide the second click event on all anchor tags except those that trigger popupfun? I have a sample page set up. [Check out the JS Fiddle here][1] http://jsfiddle.net/ananth3087/LgLnpvf4/15/ Link Anchor Tags: The page includes two ...

javascriptjqueryhtmlonclickdouble-click

Is there a way to customize the color of a MUI styled component?

I have a customized MUI component that displays a circular badge in green. const StyledGreenBadge = styled(Badge)(({ theme }) => ({ '& .MuiBadge-badge': { backgroundColor: '#44b700', color: '#44b700', ...

javascriptcssreactjsmaterial-uistyled-components

Anchoring links on a webpage that provide users with a clear indication of their current position within the page

In the scenario of a single-page website with various sections (divs) and a header containing links to different anchors on the page, there is a desire to have an indicator highlight which anchor the user is currently viewing. An example of this can be s ...

javascriptcsshtmlhyperlink

What is the best way to implement media queries for mobile phones and desktop computers?

I've come across similar questions before but still can't wrap my head around it. Here's my dilemma: I want the index page of my website to display in desktop layout on desktops and mobile jquery on mobile devices. Currently, I have set up m ...

javascriptjquerycssjquery-mobile

jQuery not targeting absolute positioned duplicates of the <div>'s

(Please find the code link at the bottom of this question) I have been working on a radial menu for a web project. However, I've encountered an issue that has me stuck for hours now. No matter what I try, I can't seem to get any response from th ...

jqueryhtmlcss

Utilize a personalized container for the slider's thumb within a React application

Is it possible to replace the slider thumb with a custom container/div in React instead of just styling the thumb or using a background image? I have found a codepen example that demonstrates what I am trying to achieve, but unfortunately I am having trou ...

htmlcssreactjsslider

Automatically press a button that appears on the webpage

I am looking to automate the clicking of a button that appears on a website. How can I accomplish this using Python? I have no experience in JavaScript and am fairly new to programming. Here is the outer HTML code for the button: <button type="button" ...

javascriptpythonhtmlautomationwebautomation

Trouble with Bootstrap popover displaying content

I've been working on implementing the bootstrap popover feature on a website and have had some success. I managed to get the popover to appear when the link is clicked, but unfortunately, I'm not seeing any content in the box other than the title ...

javascriptjqueryhtmltwitter-bootstrappopover

Manipulating AngularJS with Sass variables

Currently, I am developing a theme changer using AngularJS and I'm facing difficulty in figuring out how to swap one SASS file with another (both containing variables) when the user changes their theme. I understand that once SASS is compiled to CSS, ...

cssangularjssassnode-sass

Modify CSS progress circle to update the percentage of completion

I stumbled upon this code snippet, and although it works flawlessly, I encountered a limitation - I can only set the percentage to 25, 50, or 75. If I try to increase it to 85%, the circle fills up completely. Does anyone have any suggestions on how to res ...

htmlcss

Guide to creating a nested list using the jQuery :header selector

Here is the structure of my html: <h1 id="header1">H1</h1> <p>Lorem ipsum</p> <h2 id="header2">H2</h2> <p>lorem ipsum</p> <h2 id="header3">H2</h2> <p>lorem upsum</p ...

javascriptjqueryhtmlcssnested