What is the process for creating a sub-menu for a dropdown menu item in Bootstrap 5?

https://i.sstatic.net/o4FLn.pngthis is my code which i have created this navigation bar with bootstrap and all of its drop downs but i want to add another drop down to the services drop down section inside of webdevelopment but it can't any easy solution for this to done with bootstrap5...

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Services
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

            <!-- webDevelopment DropDown -->

            <li id="menu-item-1644" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1644"><a href="http://localhost:8888/wordpress-experiments/level-1/level-2/">Web Development</a>
              <ul class="sub-menu">
                <li id="menu-item-1645" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1645"><a href="http://localhost:8888/wordpress-experiments/level-1/level-2/level-3/">Level 3</a></li>
                <li id="menu-item-1699" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1699"><a href="http://localhost:8888/wordpress-experiments/level-1/level-2/level-3a/">Level 3a</a></li>
                <li id="menu-item-1700" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1700"><a href="http://localhost:8888/wordpress-experiments/level-1/level-2/level-3b/">Level 3b</a></li>
              </ul>
            </li>
           

            <li><a class="dropdown-item" href="#">Software Development</a></li>
            <li><a class="dropdown-item" href="#">Networking and Cloud</a></li>
            <li><a class="dropdown-item" href="#">Cyber Defence and offensive</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">More</a></li>
          </ul>
        </li>
javascripthtmljquerycssbootstrap-5

Answer №1

If you're looking to add a dropdown submenu to the "more" link, simply insert another menu inside the list item:

<li>
<div class="submenu">
<a class="subnavbtn">Partners <i class="fa fa-caret-down"></i></a>
<div class="submenu-content">
  <a href="#link1">Link 1</a>
  <a href="#link2">Link 2</a>
  <a href="#link3">Link 3</a>
  <a href="#link4">Link 4</a>
</div>
</div>
</li>

You can style it however you prefer and use CSS to hide it and position it absolutely:

.submenu-content {
  display: none;
  z-index: 1;
  position: absolute;
}

Then, make it visible when the link is hovered over:

.subnav:hover .subnav-content {
  display: inline;
}

Answer №2

After much searching, I came across this solution, but please be aware that it is only compatible with Bootstrap 5.


        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Services
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

            <!-- webDevelopment DropDown -->

            <li>
              <a class="dropdown-item" href="#">Web Development</a>
              <ul class="dropdown-menu dropdown-submenu">
                <li>
                  <a class="dropdown-item" href="#">Submenu Submenu item 1</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Submenu Submenu item 2</a>
                  
                </ul>
                </li>
            

            <li><a class="dropdown-item" href="#">Software Development</a></li>
            <li><a class="dropdown-item" href="#">Networking and Cloud</a></li>
            <li><a class="dropdown-item" href="#">Cyber Defence and offensive</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">More</a></li>
          </ul>
        </li>

CSS:

.dropdown-menu li {
  position: relative;
} 

.dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
  right: 100%;
  left: auto;
}

.dropdown-menu>li:hover>.dropdown-submenu {
  display: block;
}

Answer №3

If you want to position the submenu using bootstrap without having to override the positioning styles, you can simply add data-bs-toggle="dropdown" to the link that triggers the submenu. To prevent the menus from disappearing immediately when clicked, you just need to add a bit of JavaScript to call stopPropagation() on the click handler for the triggering link.

To position the submenu to the right of the link, use "dropend" on the parent element. Additionally, make use of data-bs-display="static" to disable dynamic popper.js positioning. This is necessary because the submenu is positioned absolutely relative to the main menu, and popper.js may incorrectly reposition the submenu if it detects insufficient space within the parent container.

Here's an example HTML snippet:

<li class="dropend" id="menu-item-1644">
  <a href="#" data-bs-display="static" data-bs-toggle="dropdown" aria-expanded="false">Web Development</a>
  <ul class="dropdown-menu sub-menu">
    <li id="menu-item-1645"><a href="#">Level 3</a></li>
    <li id="menu-item-1699"><a href="#">Level 3a</a></li>
    <li id="menu-item-1700"><a href="#">Level 3b</a></li>
  </ul>
</li>

And here's the accompanying JavaScript code:

document.querySelectorAll('.dropdown-menu a').forEach(function(element) { 
  let nextEl = element.nextElementSibling;
  if(nextEl && nextEl.classList.contains('sub-menu')) { 
    element.addEventListener('click', function (e) {
      // prevent opening link if link needs to open dropdown
      e.preventDefault();
      e.stopPropagation();
    });
  }
})

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

Determine the minimum width in an HTML table's <td> tags

One issue I have encountered is with the columns in my table. I need each column to adjust its width dynamically based on the size of the browser window. However, I also want to ensure that the columns are not too small. To address this, I attempted to se ...

htmlcsshtml-table

Store the user's link for future reference and quickly navigate to the TransferPage in 3 seconds. Then, return

After a user clicks on any button, they will be redirected to the Transfer Page for 3 seconds. Then, they will automatically return to the link they originally clicked on. Schematic： https://i.sstatic.net/dU30F.png HTML: https://i.sstatic.net/UOldi.p ...

javascriptvue.jsnuxt.jsvue-componentvue-router

Craft an interactive Bootstrap 4 Accordion featuring content retrieved through an Ajax request

I am currently working on setting up a Bootstrap 4 Accordion. Utilizing an Ajax call to fetch the data, I can see the data being logged correctly in the console. My objective is to iterate through the data using a forEach loop and add a new card to the Acc ...

jqueryajaxtwitter-bootstrapbootstrap-4accordion

What is the best way to display real-time search results from an AJAX call in a format similar

I have a dynamic live search feature using Ajax that successfully fetches the necessary data. However, I'm struggling to display the results in a format similar to Google or YouTube (this is my first attempt at implementing a live search function). I ...

jqueryajax

Firefox triggers drag events while passing over a div scrollbar

I am looking to create a file drag and drop feature using a styled div: When dragging files over the div, I want the border color to change When dragging files out of the div, I want the border color to revert back to the original In Firefox 35 (Ubuntu) ...

javascriptjqueryhtmlfirefox

Gauging Screen Size: A Comparison between Media Queries and JavaScript for Adjusting Div Position

I am currently facing an issue with the banner on my website. It contains a slider and has a position set to absolute. The problem arises when viewing it on smaller screens, as only the left side of the wide banner is visible. Initially, I tried using med ...

javascriptcssmobilescreen

What steps should I follow to create a large Angular single page application using ASP.NET MVC?

After gaining some experience with AngularJS on a small project, I am now ready to tackle a larger application. My plan is to create a single-page application using asp.net, making WebAPI calls and loading AngularJS views. However, I am unsure about how ...

javascript.netasp.net-mvcangularjsasp.net-web-api

Managing the load more feature with a Selenium script using Python

As a newcomer to Python, I am experimenting with automating clicks on the "load more" button found in the comment section of Instagram using Selenium and Python. Despite being able to click once successfully, the button disappears after the first click. ...

pythonhtmlseleniumwebautomation

Notify immediately if there is any clicking activity detected within a designated div container

I am looking to trigger an alert when a specific div is clicked. Here is the scenario: <div class="container"> <div class="header"> <h1>Headline<h1> </div> <div class="productbox"></div> </div> I have succ ...

javascriptjqueryalert

What causes a decrease in speed when a function is called without specifying its owner?

Let's consider the following scenario: var abs = Math.abs; Wouldn't abs(-10) be quicker than Math.abs(-10)? Since abs is called directly. This caught my attention: Math.abs vs custom abs function Update: The same test conducted in Internet ...

javascriptoptimizationjsperf

What is the best way to create a video that adjusts to different screen sizes within

I am working on the responsive version of client's website and I stumbled upon this issue - when I make smaller the browser window, the youtube video is not centered - the padding-right: 10px; is ignored - why? How could I fix that? Here is the CSS ...

htmlcssresponsive-design

Unexpected issue encountered for identifiers beginning with a numerical digit

Is it possible to select an element from a page with an id that begins with a number? $('#3|assets_main|ast_module|start-iso-date') Upon attempting to do so, the following error occurs: Uncaught Error: Syntax error, unrecognized expression: ...

javascriptjquerycss

What is the best way to update a nested property in an object?

Consider the following object: myObject{ name: '...', label: '...', menuSettings: { rightAlignment: true, colours: [...], }, } I want to change the value of rightAlignment to fals ...

javascriptarraysobject

Error encountered when downgrading a component from Angular v5 or v4 to AngularJS due to an injector issue

I have successfully created a basic angular5 component called HelloComponent: var HelloComponent = function () { }; HelloComponent.annotations = [ new ng.core.Component({ selector: 'hello-world', template: 'Hello World!' } ...

javascriptangularjsangular5

CSS is not referred to as animation

Every time we hit a key, the dinosaur receives a jump class that should activate an animation. Unfortunately, the animation does not play. animation not functioning <!DOCTYPE html> <html lang="en"> <head> <meta c ...

css

Eliminate unnecessary spacing from the sticky container

Trying to implement a sticky menu in an angular 14 project using angular material 14 has been quite challenging for me. Initially, I attempted to use the 'fixed' position, but encountered issues where the menu would consistently return to the to ...

htmlcssangularangular-material

Is your Vue.js chart malfunctioning?

I have been experimenting with chart.js and vue.js. The component I created is called MessageGraph, and it is structured like this (with data extracted from the documentation): <template> <canvas id="myChart" width="400" height="400">< ...

javascriptlaravelvue.jschart.js

When an input value changes in jQuery, the script attempts to locate the parent element and then find the next input. However, in some cases, the value returned

I am currently attempting to retrieve the nearest input field within the same or different class that is located in the subsequent row div section. Unfortunately, I am receiving an 'undefined' response and unable to acquire the desired informatio ...

javascriptjquery

Utilizing JSON and select for dependency management

Let's say we have a JSON object: { "A": { "1": "1", "2": "2", "3": "3" }, "B": { "4": "4", "5": "5", "6": "6" }, "C": { "7": "7", "8": "8" } } And we also have ...

javascriptjqueryhtml

``Emerging Challenge in React: Ensuring Responsive Design with Fixed Positioning

I'm currently encountering a challenge with my React application. I've developed a website using React that includes a component named CartMenu, which is integrated within another component called Products. The issue arises when I utilize the de ...

javascriptreactjstailwind-css