Skip to main content
S
sharonk39116496
Inspiring
January 4, 2020
Question

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

  • January 4, 2020
  • 2 replies
  • 941 views

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>

This topic has been closed for replies.

2 replies

Nancy OShea
Nancy OShea
Community Expert
January 4, 2020

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>

 

Nancy O'Shea— Product User, Community Expert & Moderator
S
sharonk39116496Author
Inspiring
January 4, 2020

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.

 

O
osgood_
Brainiac
January 4, 2020

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.

    O
    osgood_
    Brainiac
    January 4, 2020

     

    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>

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices