0

I am trying to create a vertical nav bar with a dropdown menu on the third list item in Bootstrap 4, but not matter what I try, my template refuses to display the dropdown options. The template itself is to for an Angular component.

I have already consulted some proposed solutions from this StackOverflow post and I looked at the documentation for building dropdowns using data attributes as well as for building the dropdown component in Bootstrap 5 and Bootstrap 4, as I do not see any major changes from one version to the next.

I have recreated the code in Stackblitz.

Any help would be appreciated.

liberlux
  • 85
  • 8
  • 1
    This can help you, I added and change data-bs-toggle in 21 row demo https://stackblitz.com/edit/bootstrap-5-uxcjtc?file=src/index.html – Nikita Mar 09 '23 at 18:49
  • Hi Nikita, thank you for the input. I added the script into my index.html page and change the data-bs-toggle row and the drop down list does appear, only it is displaying in a single horizontal line. – liberlux Mar 09 '23 at 19:28
  • 1
    Use [this library](https://github.com/MintPlayer/mintplayer-ng-bootstrap). The navbar supports 2nd level dropdowns, has a simple api, scss per component, and has ` – Pieterjan Mar 09 '23 at 19:38
  • Hi Pieter, I cloned the library in a separate folder and tried running `npm start` but I am getting an error related to the `nx` package: ```bash > NX Cannot find module 'node:fs' ``` I am running node v14.17.3, could this be a version incompatibility problem? – liberlux Mar 09 '23 at 19:51
  • 1
    Could be, but would rather surprise me. I think I'm on Node 16. Did you run `npm i`? You may try `npm install --global nx@latest` too maybe – Pieterjan Mar 09 '23 at 19:56
  • 1
    [Here's the homepage](https://nx.dev) of NX, the monorepo tool used in the project – Pieterjan Mar 09 '23 at 20:01
  • Thanks again. I ran `npm install --global nx@latest` and received the error message: ```bash > NX Could not find Nx modules in this workspace. Have you run npm/yarn install? ``` So, I tried to install yarn and received the message: `error @angular/animations@15.2.2: The engine "node" is incompatible with this module. Expected version "^14.20.0 || ^16.13.0 || >=18.10.0". Got "14.17.3" error Found incompatible module.` So, my project seems to have a incompatibility problem with my version of node. I will try to upgrade and see what happens. – liberlux Mar 09 '23 at 20:05
  • I'm sorry. I created a new Windows 11 VM using **"Hyper-V Quick Create"** - Installed Node 14 (14.21.3) - Installed Git - cloned the repository - cd into the folder - `npm i` - `npm start -- --open` and I don't seem to run into problems. On my DevMachine I'm using Node 16.13.1. You don't even need to install `nx` globally. The version in the project is fine enough – Pieterjan Mar 09 '23 at 22:26
  • No worries. My problem is that I am limited to developing an angular project using Angular v.11 as the platform where I hope to deploy the application can only host lower version angular. – liberlux Mar 10 '23 at 14:19

1 Answers1

0

You need

  1. add "@popperjs/core": "^2.11.6" dependensy to package.json
     "dependencies": {
        "@popperjs/core": "^2.11.6",
        "bootstrap": "^5.2.3",
        "sass": "^1.58.3"
      },
  1. import bootstrap to index.js
import {} from 'bootstrap';
  1. change data-toggle to data-bs-toggle in html
<a
  id="dropdownButton"
  class="nav-item dropdown-toggle"
  role="button"
  data-bs-toggle="dropdown"
  aria-expanded="false"
>
  1. add class="dropdown-item" to 4th item(this is just cosmetic)
 <div class="dropdown-menu" aria-labelledby="dropdownButton">
    <a href="" class="dropdown-item">Item 1</a>
    <a href="" class="dropdown-item">Item 2</a>
    <a href="" class="dropdown-item">Item 3</a>
    <a href="" class="dropdown-item">Item 4</a>
 </div>

Demo https://stackblitz.com/edit/bootstrap-5-chpvg8?file=src/index.html

Nikita
  • 682
  • 2
  • 13