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.
Related
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.
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 want to create multilevel dropdwon using bootstrap 4 and angular 7.
I could create simple dropdown in navbar using the official documentation of bootstrap.
But when i tried to create multilevel dropdown, it wont working.
Bootstrap 4: Multilevel Dropdown Inside Navigation
using the above link , I could find a solution to make multilevel dropdown.
But it uses some kind of jQuery code for working fine.
Is there any built in method for making multilevel dropdown using bootstrap?
I didn't see anything related to this in official documentation of bootstrap .
I don't know whether I missed any scripts or css in my code.
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/popper.js/dist/popper.min.js"
],
here is my angular.json part for bootstrap css and js.
any kind of Solution will be thankful.
I need the result something like this
Try with this:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="row">
<h2>Multi level dropdown menu in Bootstrap 3</h2>
<hr>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>Some action</li>
<li>Some other action</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
Even More..
<ul class="dropdown-menu">
<li>3rd level</li>
<li>3rd level</li>
</ul>
</li>
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
See Reference: https://bootsnipp.com/snippets/kM4Q
Bootstrap dropdown code works fine (without angular 2) but same code is integrated with angular 2, it fails to work as expected.
HTML and CSS Code: [Dropdown is working.]
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="ti-user"></i>
<p>You can</p>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Signup</li>
</ul>
</li>
</ul>
</div>
HTML and CSS with Angular 2 [Dropdown is not working.]
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
<i class="ti-user"></i>
<p>You can</p>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a [routerLink]="['/login']">Login</a></li>
<li><a [routerLink]="['/signup']">Signup</a></li>
</ul>
</li>
</ul>
</div>
<ul class="dropdown-menu">
<li><a routerLink='login'>Login</a></li>
<li><a routerLink='signup'>Signup</a></li>
</ul>
Try this.. with final version, routerLink shouldn't be used as biniding unless you have path params.
Then in router file
RouterModule.forRoot([
{path:"login", component : },
{path: "signup", component: }
])
Certain Bootstrap Elements do not work in Angular2/4. Luckily the Angular UI team has built out Bootstrap 4 Elements in Angular components.
Follow these instructions to install
Documentation for dropdown
Note: this is tested with angular 4.0.3 so you may have to find the version that works with angular 2.