Creating a multi-tiered dropdown menu in the navigation bar with the help of Bootstrap 4 and Angular 7

My goal is to implement a multilevel dropdown using bootstrap 4 and angular 7.

While I successfully created a simple dropdown in the navbar following the official bootstrap documentation, I struggled to make the multilevel dropdown work.

After referring to this Stack Overflow thread, I found a solution for the multilevel dropdown, but it required some jQuery code to function properly.

Is there a native method in bootstrap to create multilevel dropdowns, as I couldn't find any related information in the official documentation?

I've checked my code for any missing scripts or CSS files, but I couldn't pinpoint the issue.

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "node_modules/popper.js/dist/popper.min.js"
],

Here is the relevant part of my angular.json file for the bootstrap CSS and JS integration.

Any assistance in finding a solution for creating multilevel dropdowns would be greatly appreciated.

https://i.sstatic.net/nei5U.png

I am aiming for a result similar to the one shown in the provided example.

javascriptcssangulartwitter-bootstrapbootstrap-4

Answer №1

Check out this code snippet:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//codejquery.com/jquery-1.11.1.min.js"></script>

<div class="container">
    <div class="row">
        <h2>Creating a Multi-level Dropdown Menu in Bootstrap 3</h2>
        <hr>
        <div class="dropdown">
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
                Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
              <li><a href="#">Perform an action</a></li>
              <li><a href="#">Take another action</a></li>
              <li class="divider"></li>
              <li class="dropdown-submenu">
                <a tabindex="-1" href="#">Hover over me for more options</a>
                <ul class="dropdown-menu">
                  <li><a tabindex="-1" href="#">Second level</a></li>
                  <li class="dropdown-submenu">
                    <a href="#">Explore further..</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">3rd level</a></li>
                        <li><a href="#">3rd level</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Second level</a></li>
                  <li><a href="#">Second level</a></li>
                </ul>
              </li>
            </ul>
        </div>
    </div>
</div>

For more details, visit:

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

What is the process for obtaining a compilation of JavaScript files that are run when an event is triggered?

How can I generate a list of all the JavaScript files that are triggered when a button is clicked or an input field is selected in a complex system? Is it possible to achieve this with Chrome DevTools, or are there alternative solutions available? If Chro ...

javascriptfileeventsknockout.jsgoogle-chrome-devtools

Encountering a NaN outcome when summing values from various select options

I'm working on a project that involves adding up the prices based on the surface chosen by the user. I'm struggling with calculating the partial cost when the user's choice changes. totalSum.ts num: Calculation totalAmount: number cate ...

javascripthtmlarraysangulartypescript

Synchronous async routes in Node Express

My express server requires fetching data from multiple external sources for each request, with the logic separated into various routers (some of which are not under my control). These routers operate independently, eliminating the need for one to wait on ...

javascriptnode.jsexpressroutes

Adding query parameters to the end of every link on a webpage

Wondering how to automatically add GET values to the end of each anchor href on a webpage? For instance, if you input google.com?label=12&id=12 I want to ensure that "?label=12&id=12" gets added to the end of every single href in an anchor tag on ...

javascriptphphtml

Leveraging external JSON data in a Jade template with Node.js

Is there a way to successfully pass a Json Object from XMLHttpRequest to my jade file? I am currently experiencing a blank page display and a 500 internal error being sent by the server for the get method. var express = require('express'); var r ...

javascriptnode.jsmongodbexpressxmlhttprequest

Urgent concern: the require function is being utilized in a manner that prevents the static extraction of dependencies [mysterious]

After implementing the magic-sdk version 8.0.1 on my project, I encountered the following warning message: warn - ./node_modules/magic-sdk/dist/es/index.js Critical dependency: require function is used in a way in which dependencies cannot be statically e ...

javascriptnext.jsmagic-sdk

JavaScript: Transforming a key-value pair collection into an array of objects

I'm looking to convert a dictionary into a list of dictionaries using JavaScript. Can someone help me with that? var dict = { "apple" : 10, "banana" : 20, "orange" : 30 } var data = [ {"apple" : 10}, {"ban ...

javascriptjsonreactjsdictionary

Can someone explain the significance of this CSS code (specifically regarding font-size division)?

Forgive me, but I'm struggling to come up with a more suitable title for my query. I've come across this piece of code font: 9pt/18px Tahoma; Can anyone shed some light on what it signifies? ...

css

Bootstrap 4 radio buttons are not aligning properly with the padding

There seems to be an issue with the alignment of Bootstrap 4 custom radio buttons and my left padding. Here is a snippet: https://i.sstatic.net/vWTNo.png This is part of the code for displaying an item <div class="p-4"> <ul class="d-flex ...

htmlcssbootstrap-4radio-button

margin-top: automatic adjustment, with a minimum of 50 pixels

I am trying to add a minimum of 50px margin to the top of my footer tag using CSS, but I haven't been successful with the min() function. I'm not sure if I am overlooking something or if there is another correct approach to achieve this. * { ...

javascripthtmlcss

Vue.js - Resetting child components upon array re-indexing

I am working with an array of objects const array = [ { id: uniqueId, childs: [ { id: uniqueId } ] }, { id: uniqueId, childs: [ { id: uniqueId } ] }, ] and I have a looping structure ...

javascriptarraysvue.js

Exploring case scenarios within a function reliant on the instanceof operator (JEST)

Encountering a problem while writing unit tests for a function with instance checks. The business logic is as follows: let status = new B(); const testFunction = () => { if (status instanceof A) { console.log('inside A') } else i ...

javascriptunit-testingjestjs

Encountering difficulty in accessing game.html following button clicks

Why isn't the redirection to game.html happening after clicking on the buttons in index.html? The file structure consists of server/server.js, public/index.html,public/game.html. <!DOCTYPE html> <html> <title>QUIZ GAME</title ...

javascripthtmlnode.jsexpresssocket.io

Populating Redux form fields with data retrieved from API call

Currently, I am working on an address finder component in React and I am looking for the most effective way to update the fields with values once I receive the data from the API. I am using a fetch in React to fetch the data and fill in some form fields, t ...

javascriptreactjsreduxreact-reduxredux-form

Issue with separatorKeys functionality in ng2-tag-input

I've been experimenting with the ng2-tag-input module using a simple configuration: import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'search-form', template: `<tag-input [( ...

angularng2-tag-input

SecretKey is not valid, FirebaseError code: 400

Currently, my backend is powered by Firebase. However, when I initiate it using NODE_ENV=debug firebase emulators:start --inspect-functions, the following messages are displayed: emulators: Starting emulators: auth, functions, storage ⚠ functions: Ru ...

javascriptnode.jsfirebase

Alert displayed at the center of the browser when the value surpasses the specified number

My webpage retrieves SNMP data using PHP and displays it with HTML, color-coding the values. I want to add a pop-up alert when a value exceeds a certain number. I have attempted different jQuery solutions without success. The PHP code to get the value: ...

javascriptphpjqueryhtmlcss

What could be causing the lack of reflection of Angular changes in the browser post-build process?

I'm having trouble seeing changes reflected in my Angular project after making them. I've tried clearing the cache pages and cookies in Chrome, as well as enabling disable cache in the network tab of developer tools. In addition, I cleared the a ...

node.jsangulargoogle-chrome

Learn how to use Bootstrap to style your buttons with centered alignment and add a margin in between each one

Looking to center four buttons with equal spacing between them? Here's what you can do: |--button--button--button--button--| Struggling with manual margin adjustment causing buttons to overlap? Check out this code snippet: <div id=""> ...

htmlcssbootstrap-5

What sets npm install apart from manual installation?

I've been exploring requirejs recently. I'm trying to decide between installing it using npm install requirejs or manually downloading it from the website. Are there any differences between the two methods? Are there any advantages or disadvantag ...

javascripthtmlnpminstallationrequirejs