Using Dreamweaver 2019 and bootstrap 4 - trying to get multiple Navbar Dropdowns to work

[sharonk39116496]

How can I get three dropdown items in a bootstrap 4 navbar.  The below example is for one dropdown in the navbar.  It has a id="navbardropdown" so I   cannot copy this code therefore for the second or third dropdown , since I cannot repeat the id="navbardropdown" three times in the code.  

This is bootstrap 4 dropdown code .  Of course I am new to this and working on it all day,  so appreciate your help.  

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Classes
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Studio Classes</a>
<a class="dropdown-item" href="#">Private Class or Consultation </a>
</div>
</li>

[osgood_]

Actually Bootstrap drop-downs are not dependent on unique ids. You can just give the id any name you like the sound of (see example below). But yes it's true, although the dropdowns WILL still work if you use the same id, it's best practice to use unique ids. Just in case you need to add a javascript event to that id in future or some specific css. Javascript/css then knows which event/styling to apply to which specific id.

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="mickey_mouse" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Link 5
</a>
<div class="dropdown-menu" aria-labelledby="mickey_mouse">
<a class="dropdown-item" href="#">Action 2</a>
<a class="dropdown-item" href="#">Another action 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here 2</a>
</div>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="donald_duck" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Link 6
</a>
<div class="dropdown-menu" aria-labelledby="donald_duck">
<a class="dropdown-item" href="#">Action 3</a>
<a class="dropdown-item" href="#">Another action 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here 3</a>
</div>
</li>

[Nancy OShea]

Number them with a suffix of 1, 2, 3...

<!--1st dropdown-->
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a> </div>
</li>

<!--2nd dropdown-->
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a> </div>
</li>

<!--3rd dropdown-->
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a> </div>
</li>

[osgood_]

That's not hugely creative thinking (tongue in cheek). Are we ever going to get the emoijs???????

[Nancy OShea]

"That's not hugely creative thinking..."

You're right.  Chalk it up to too much holiday food and drink. 😞

I use keyboard emojis.

:  - ) = smile

:  - ( = frown

[sharonk39116496]

I appreciate your help very much.  Thanks.

One more quick question....

if I use a two more unique names like id="mickey_mouse" and id="navbardropdown3", do I have to add anything in my css for these id's??  if so, what??

Lets hope in a few months I learn more about this.  Thanks much for your help.

[osgood_]

I dont use Bootstrap but as far as l know the ids are only there for accessibility reasons. You dont need to add any additional css, only if you require it to specifically change some attibutes of a specific link.

A couple of other regular contributors here, Nancy and Ben, use Bootstrap extensively so they may be able to shed more light on why the ids are present, lm more of a non Bootstrap coder.

[Nancy OShea]

"do I have to add anything in my css for these id's"

No.

Have you ever used a screen reader like JAWS?  The IDs are there to support ARIA roles.  This video discusses ARIA Landmarks.  But you get the general idea of what roles do and why they are important for accessibility. 

More on MDN:

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label...