I'd like to make a split button dropdown with Bootstrap 3. I didn't find any working snippet.
My navbar looks like:
<header class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
Example
</li>
<li>
Example
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</header>
You can place it inside the nav li and add navbar-btn to the btn-group..
<li>
<div class="btn-group navbar-btn">
<button class="btn btn-danger">Action</button>
<button data-toggle="dropdown" class="btn btn-danger dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</li>
Demo: http://bootply.com/100070
Related
I have a collapse class applied on navbar but it is not working well. The button gets clicked but menu is not displayed.
Following is the code for the complete navbar:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-fire"></span>Responsive Design</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" style="text-decoration:none;">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="text-decoration:none;">Link</a>
</li>
<li class="nav-item dropdown">
<a style="text-decoration:none;" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Web Design</a></li>
<li><a class="dropdown-item" href="#">IOS Development</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">SEO</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="navbar-form navbar-right d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Bootstrap 5 contains data-bs-toggle instead of data-toggle.
I am working with Angular8 and want to use Bootstrap4 navbar.
But Dropdown-Menu not working
Here is Angular.json code
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Here is my navbar.component.html code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<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>
</ul>
</div>
</nav>
Here is my output in Browser
Anything am I missing ?
Change your navbar.component.html to this:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown" [class.show]="navbarOpen">
<a class="nav-link dropdown-toggle" (click)="toggleNavbar()">
Dropdown Menu
</a>
<div class="dropdown-menu" [class.show]="navbarOpen" aria-labelledby="navbarDropdownMenuLink">
<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>
</ul>
</div>
</nav>
And in your navbar.component.ts write above the constructor:
public navbarOpen: boolean = false;
and under your constructor write:
public toggleNavbar() {
this.navbarOpen = !this.navbarOpen;
}
Please NEVER use jQuery in Angular2+ Projects.
1. You don't need it
2. In my opinion it would be anti-pattern
If you do it like that, it should work. Give me some feedback whether it helped you.
enter image description here and check it
This code works fine
import {
Directive,
ElementRef,
HostBinding,
HostListener,
, Renderer2
} from '#angular/core';
#Directive({
selector: '[appToggleMenu]'
})
export class ToggleMenuDirective {
#HostBinding('class.show') isToggle: boolean = false;
constructor(
private el: ElementRef,
private render: Renderer2
) { }
#HostListener('click') toggleClick() {
this.isToggle = !this.isToggle;
const ui = this.el.nativeElement.querySelector('.dropdown-menu');
if (ui) {
if (this.isToggle) {
this.render.addClass(ui, 'show')
} else {
this.render.removeClass(ui, 'show');
}
}
}
}
html:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid ">
<a class="navbar-brand" href="#">Navbar</a>
<div>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav" appToggleMenu>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" role="button">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
I want to create nav-bar under nested Dropdowns in Aurelia using Materialize.I tried very much.
<span repeat.for="item of menuItems">
<ul id="${item.target}" data-beloworigin="true" class='dropdown-content nested' if.bind="item.type==3" role="menu">
<li repeat.for="item of item.items" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" class.bind="item.class"role="button" aria-haspopup="true" aria-expanded="false" href='#' data-target="${item.target}" data-hover="hover" data-alignment="left" > Secondary ${item.label}
<span class="caret"></span>
</a>
<a if.bind="item.type==0" href.bind="item.url"> ${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</li>
</ul>
<ul if.bind="item.type==3" id="${item.target}" class='dropdown-content' >
<li repeat.for="item of item.items" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" role="button" aria-haspopup="true" aria-expanded="false"> ${item.label}
<span class="caret"></span>
</a>
<a if.bind="item.type==0" href.bind="item.url" > Third ${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</li>
</ul>
</span>
<nav class="navbar-default d-flex align-items-center">
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down" >
<li repeat.for="item of menuItems" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" class='dropdown-button btn' beloworigin="true" data-target="${item.target}" role="button"
aria-haspopup="true" aria-expanded="false" >${item.label}
</a>
</li>
</ul>
</div>
</nav>
menuItems is getting menus from Menu.ts file.
Type 3 is using for Parents Menu
Type 0 is menus which will be executed to URL by click dropdown Menu
I want when this code run then menu bar should create in which I click on the dropdown then related sub-menu should be open.
After Some modification My code is working now.
<span repeat.for="item of menuItems">
<ul id="${item.target}" class='dropdown-content' if.bind="item.type==3" class.bind="item.class">
<li repeat.for="item of item.items" class.bind="item.class">
<a if.bind="item.type==3" href="#" class='dropdown-button' data-hover="hover" data-alignment="left"
data-target="${item.target}" href='#'> Secondary ${item.label}
<a if.bind="item.type==0" href.bind="item.url">${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</a>
<ul id="${item.target}" class='dropdown-content' class.bind="item.class">
<li repeat.for="item of item.items" class.bind="item.class">
<a if.bind="item.type==0" href.bind="item.url">${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</a>
</li>
</ul>
</li>
</ul>
</span>
<nav class="navbar-default row mb-0 d-flex align-items-center">
<div class="nav-wrapper col s12">
<i class="icon icon-propriete"></i>
<ul class="right hide-on-med-and-down">
<li repeat.for="item of menuItems" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" class="dropdown-trigger" data-target="${item.target}">${item.label}
</a>
</li>
</ul>
</div>
</nav>
I am new to mean stack. I have used a template for nav bar from https://frontendfunn.com/bootstrap-4/admin-dashboard-template-development-tutorial/. Whenever I log in it takes me to the page with nav bar but the problem is when I click collapse bar nothing happens. When I refresh the page it works but clicking on another option in the sidebar, collapse bar option doesn't work. Please help me out.
Screenshot of navigation bar
login.component.ts:
ngOnInit() {
if (this.loginService.isLoggedIn()) {
this.router.navigateByUrl('/addcandidates');
}
}
onSubmit(form: NgForm) {
this.loginService.login(form.value).subscribe(
res => {
// tslint:disable-next-line:no-string-literal
this.loginService.setToken(res['token']);
// this.successful = 'Successfully logged in';
this.router.navigate(['addcandidates']);
},
err => {
this.serverErrorMessages = err.error.message;
}
);
}
main.component.ts:
ngOnInit() {
this.isLoggedIn = this.loginService.isLoggedIn;
}
onLogout() {
this.loginService.deleteToken();
this.router.navigate(['/login']);
}
main.component.html:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button class="navbar-toggler sideMenuToggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<a class="nav-link px-2" (click)="onLogout()">
<span class="text">Logout</span>
</a>
<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">DropDown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="wrapper d-flex">
<div class="sideMenu bg-mattBlackLight">
<div class="sidebar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/']">
<i class="material-icons icon">dashboard</i>
<span class="text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/addcandidates']">
<i class="material-icons icon">person</i>
<span class="text">Create New Test</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/qb_dept']">
<i class="material-icons icon">insert_chart</i>
<span class="text">Add Question Bank</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/currentexam']">
<i class="material-icons icon">insert_chart</i>
<span class="text">Current Tests</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/previousexam']">
<i class="material-icons icon">settings</i>
<span class="text">Previous Tests</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2 sideMenuToggler">
<i class="material-icons icon expandView ">view_list</i>
<span class="text">Collapse Side Bar</span>
</a>
</li>
</ul>
</div>
</div>
</div>
I'm trying to get a twitter bootstrap dropdown menu to not collapse and stay on the same line when using smaller devices. Here is what it currently looks like:
I'd like for the name (in this example John Smith) to be inline with My Application text and toggle button. How would I go about accomplishing that?
Example: http://bootply.com/99326
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Application</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right navbar-user">
<li class="dropdown user-dropdown">
<i class="fa fa-user"></i> John Smith <b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> Profile</li>
<li><i class="fa fa-envelope"></i> Inbox <span class="badge">7</span></li>
<li><i class="fa fa-gear"></i> Settings</li>
<li class="divider"></li>
<li><i class="fa fa-power-off"></i> Log Out</li>
</ul>
</li>
</ul>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
DEMO: http://jsbin.com/eNUpufIs/2/edit?html,css,output
I make the demo links big so you can see it.
<div class="navbar navbar-default navbar-fixed-top my-custom-nav" role="navigation">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Application</a>
<div class="navbar-right navbar-text cursor" data-toggle="dropdown" data-target=".user-dropdown">
<i class="fa fa-user"></i> John Smith<b class="caret"></b>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-user navbar-right">
<li class="dropdown user-dropdown">
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> Profile</li>
<li><i class="fa fa-envelope"></i> Inbox<span class="badge">7</span></li>
<li><i class="fa fa-gear"></i> Settings</li>
<li class="divider"></li>
<li><i class="fa fa-power-off"></i> Log Out</li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
body {padding-top:50px;}
.cursor {cursor:pointer}
/* your going to need to fiddle with the css to make the menu consistent left padding-margin */
/* consistent left padding */
#media (max-width:767px) {
.my-custom-nav .navbar-collapse .navbar-nav > li {padding-left:15px!important;}
.my-custom-nav .user-dropdown > .dropdown-menu > li {padding-left:5px!important;}
}
Make sure you test it!