I'm using Bootswatch to make a navbar for my React project. I'm attempting to add a dropdown menu, but I can't get it to work when I click it. Here's the code I'm using:
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div className="dropdown-menu">
<a className="dropdown-item" href="#">Action</a>
<a className="dropdown-item" href="#">Another action</a>
<a className="dropdown-item" href="#">Something else here</a>
<div className="dropdown-divider"></div>
<a className="dropdown-item" href="#">Separated link</a>
</div>
</li>
This code is taken directly from the Bootswatch website. However, I've also tried changing the <a> tags to <Link> tags (and thus changing the href property to to). It shows the dropdown in the navbar, but clicking on it does nothing.
Related
Hello guys this must be very simple but I am not able to figure it out.
I want href in some nav links that are in dropdown to change when the user navigates to any subpages of website and remain same when the user is on the homepage for example
when a user is on homepage (www.example.com) href should be
href="#div_id1"
and when the user goes to subpage e.g.=www.example.com/contactpage then
href="www.example.com#div_id1"
I am using dynamic header so can't use different navbar code on other page
below is my code
<li id="dropdownheading" class="nav-item my-auto dropdown">
<a class="nav-link dropdown-toggle " href="#" id="navbarDropdown"
role="button" ata-bs-toggle="dropdown" aria-expanded="false">
Dropdown heading
</a>
<ul class="dropdown-menu " aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#div-id1">div 1</a></li>
<li><a class="dropdown-item" href="#div-id2">div 2</a></li>
<li><a class="dropdown-item" href="#div-id2">div 3</a></li>
</ul>
</li>
Normally I would be writing dropdown with select and option but somehow I came across to this by using bootstrap dropdown which uses anchor
Using a sample in bootstrap
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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>
</div>
<button class="get-value-btn">Get value / text</button>
If I want to get the value when I click the Get value / text with jQuery how can I do it though? Normally with select, it's straight forward but I never done it this way.
Thanks in advance for any suggestions / advices.
I am using Angular 8, and I need to make a simple drop-down menu.
The design that I have is like this:
StackBlitz
But the only difference is that I don't want to use button-style, but need the chevron. Just a simple drop-down, where I can click on different links within that drop-down.
The thing I understood is, you need to remove the button style drop-down trigger and need to add a chevron icon instead.
I've added font-awesome css to the project by importing it to the styles.css file.
styles.css
/* Add application styles & imports to this file! */
#import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css")
app-component.html
<div class="container" style="margin-top: 10%">
<div class="btn-group" dropdown>
<span id="button-basic" dropdownToggle aria-controls="dropdown-basic">
<i class="fa fa-chevron-down"></i>
</span>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
role="menu" aria-labelledby="button-basic">
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
</li>
</ul>
</div>
</div>
You can add any additional styles to the chevron as you like.
Im building a chrome extension which injects CSS and JS to a particular website. I just wanted to know if there is any way to manipulate a variable element. As an example if I wanted to duplicate the user's username and place it somewhere else on the site. This is an example of such to the current DOM I have access to:
<span class="nav-user">
<li class="dropdown nav-item">
<img alt="Avatar" class="nav-user-avatar" src="usersimage.png">
<a aria-haspopup="true" href="#" class="dropdown-toggle nav-link" aria-expanded="false"> <span class="nav-username">Rbxntl</span>
</a>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<span>Logout</span>
</a>
</div>
</li>
</span>
To reiterate basically just to move this element somewhere else on the page that will allow it to work on all users when they have the extension installed, or possibly to duplicate and place the duplicate somewhere else. I have tried researching the problem but I cant seem to find the solution.
I'm using bootstrap 4.0 beta, which requires popperjs, which is v1.12.5 . jQuery is version 3.2.1, in jQuery.noConflict() mode. This is for a shopify theme, so to include javascript files it uses gulp-include directives in Shopify's Slate command-line tool. My include file looks like this:
// =require vendor/jquery-3.2.1.js
// =require vendor/popper.js
// =require vendor/bootstrap.min.js
When I try and use the Bootstrap Navbar dropdown toggle, I get the console error
Uncaught TypeError: Cannot read property 'jquery' of undefined
jQuery is working correctly in all the non-popper bootstrap functionality and custom jQuery javascript. However, jquery (with a lower-case q) is not defined when I type it in the console, but this is what popperjs uses on line 2325. If I edit the popperjs source and capitalize the q it still throws the same error.
For more context, You are getting this error because you are trying to use an invalid HTML element as your dropdown button. I got this error because i tried to use an anchor tag which had a button nested it, alongside the .dropdown-menu div
For example
This works
<button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Thing 1</a>
<a class="dropdown-item" href="#">Thing 2</a>
<a class="dropdown-item" href="#">Thing 3</a>
</div>
But this doesn't
<a class="dropdown">
<button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Thing 1</a>
<a class="dropdown-item" href="#">Thing 2</a>
<a class="dropdown-item" href="#">Thing 3</a>
</div>
</a>
You are passing an invalid DOM element to Popper.js somehow, if you update Popper.js to the latest version you'll get a better error message.