Highlighted

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

New Here ,
Jan 03, 2020

Copy link to clipboard

Copied

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>

Topics

How to

Views

266

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

New Here ,
Jan 03, 2020

Copy link to clipboard

Copied

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>

Topics

How to

Views

267

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
Jan 04, 2020

Copy link to clipboard

Copied

 

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 04, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jan 04, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 04, 2020

Copy link to clipboard

Copied

"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

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jan 04, 2020

Copy link to clipboard

Copied

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.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jan 04, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 04, 2020

Copy link to clipboard

Copied

"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...

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Learn Resources
Add a group