I'm making a navbar, which I want to display "Login" if the currentUser is null OR "1". EJS doesn't seem to like the || operator in if statements. I put the exact if statement in my app.js file, and it gets triggered for either condition.
<%if(currentUser != null || currentUser != "1"){%>
<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">
<%=currentUser%>
</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>
<%} else if(currentUser==1 || currentUser==null){%>
<li class="nav-item">
<a class="nav-link" href="/">Login</a>
</li>
<%}%>
There's the code from the EJS file. Thank you.
Related
<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" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</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>
this is the code for navbar with dropdowns in bootstrap. but the problem is here dropdown is not working when is a toggle to the navbar dropdown icon
code Link: https://getbootstrap.com/docs/4.0/components/navbar/
any suggestions why it isn't working for react??
You need to use reactstrap npm package together with bootstrap. have a look here: https://reactstrap.github.io/
You should use react-bootstrap. It works fine with react and is specially made for react.
https://react-bootstrap.github.io/components/navbar/#navbars-overview
My dropdown is working perfectly but "Documents" link is not routing to the link.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="./docs/index.html" data-target="./docs/index.html" target="_blank" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Documents</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Admin</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Merchant</a>
</div>
</li>
<li class="nav-item dropdown">
<a href="https://google.com" target="_blank" >Documents</a>
<span class="dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</span>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="https://google.com" target="_blank">Admin</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://google.com" target="_blank">Merchant</a>
</div>
</li>
change href url as per your requirements.
I hope this will work.
I am trying to load PHP files inside a div based on what links a user clicks. I want the content to be refreshed only in that div, not the entire page.
My index.php file looks like this:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" id="allrepos" href="#">GitHubAPI</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">
<?php
if(isset($_SESSION['userid']))
{
echo '
<li class="nav-item active">
<a class="nav-link" href="#">Hello, '.$_SESSION['username'].'!</a>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
My repositories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" id="myrepos" href="#">All repositories</a>
<a class="dropdown-item" id="mybookmarked" href="#">Bookmarked repositories</a>
</div>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Profile
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Create team</a>
<a class="dropdown-item" href="#">View teams</a>
<div class="dropdown-divider"></div>
Logout
</div>
</li>';
}
else
{
echo
'<li class="nav-item active">
<a class="nav-link" href="https://github.com/login/oauth/authorize?client_id=">
Login
</a>
</li>';
}
?>
</ul>
</div>
</nav>
<div id="repositories">
<?php include 'repositories.php'; ?>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#allrepos").click(function() {
$("#repositories").load('repositories.php');
return false;
})
});
$(document).ready(function(){
$("#myrepos").click(function() {
$("#repositories").load('myrepositories.php');
return false;
})
});
$(document).ready(function(){
$("#mybookmarked").click(function() {
$("#repositories").load('mybookmarkedrepos.php');
return false;
})
});
</script>
When the index.php loads, I want the repositories.php to get loaded, then to change what gets displayed in the div with id "repositories" by clicking links.
At the moment nothing happens when I click any of the links.
Thank you!
Only for this matter , you not gonna need js here , you can do it by php also. here is an example of how it can be done.
Hope this will help you.
about
contact
service
shop
<?php
if(isset($_GET['page'])
{
if($_GET['page'] == "about")
include'about.php';
else if($_GET['page'] == "contact")
include'contact.php';
else if($_GET['page'] == "service")
include'service.php';
else if($_GET['page'] == "shope")
include'shope.php';
}
?>
I have created a navbar with Bootstrap 4. When I click on a drop-down menu link, it opens and remains open — when I hover on another drop-down link, they overlap.
I want it such that a dropdown link will be closed if I hover on another dropdown link.
Here is the code of my navbar drop-down:
.dropdown:hover>.dropdown-menu {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Welcome - Maqbool Solutions
</title>
<link rel="shortcut icon" href="../images/favion_Y13_5.ico" type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="../../js/function.js"></script>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="font/css/font-awesome.css">
</head>
<body>
<div class="container-fluid">
<!--main container-->
<!-- navbar-->
<nav class="navbar navbar-expand-lg navbar-custom fixed-top" id="navbar" style=" height: 80px;">
<div id="logo">
<a href="index.html">
<h3 class="logo_text">Maqbool Solutions</h3>
</a>
</div>
<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" id="ul">
<li class="nav-item " align="center">
<i class="fa fa-home " aria-hidden="true"></i>
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cubes" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="products/ims/ims.html">Institute Managment Systems</a>
<a class="dropdown-item" href="products/pnms/pnms.html">Pension Managment Systems</a>
<a class="dropdown-item" href="products/pms/pms.html">Property Managment Systems</a>
<a class="dropdown-item" href="products/labms/labms.html">Laboratory Managment Systems</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="products/apps/apps.html">Apps</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cogs" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="services/skill_service.html">Training and Skills</a>
<a class="dropdown-item" href="services/indestrial_services.html">Industry Expertise</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/web_service.html">Web services</a>
<a class="dropdown-item" href="services/software_service.html">Software services</a>
<a class="dropdown-item" href="services/animation_service.html">Animation services</a>
<a class="dropdown-item" href="services/graphic_service.html">Graphic services</a>
<a class="dropdown-item" href="services/game_service.html">Game services</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/apps_service.html">App services</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Training
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="training/soft.html">Software Designing & Development</a>
<a class="dropdown-item" href="training/design.html">Designing & Composing</a>
<a class="dropdown-item" href="training/web.html">Web Designing & Development</a>
<a class="dropdown-item" href="training/animation.html">2D&3D Animation & Development </a>
<a class="dropdown-item" href="training/game.html">Game Development </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="training/app.html">App Development </a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-briefcase" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="aboutus/hwr.html">Who we are</a>
<a class="dropdown-item" href="aboutus/our_vision.html">Our vision</a>
<a class="dropdown-item" href="aboutus/our_team.html">Our Team</a>
<a class="dropdown-item" href="aboutus/policy.html">Privacy & Policy</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="career/jobs.html">Jobs</a>
<a class="dropdown-item" href="career/inter.html">Internship</a>
<a class="dropdown-item" href="career/hiring.html">Our Hirring process</a>
</div>
</li>
<li class="nav-item" align="center">
<i class="fa fa-pencil" aria-hidden="true"></i>
<a class="nav-link" href="contect_us.html">Contact Us</a>
</li>
</ul>
</div>
<hr class="col-md-12 nav_hr">
</nav>
<!--end of navbar-->
</div>
</body>
</html>
You have to add below jQuery code in your custom js file
$('.nav-link').hover(function() {
$(this).closest('.nav-item.dropdown').siblings('.nav-item.dropdown').removeClass('show').find('.dropdown-menu').removeClass('show');
})
The issue is when you click on the dropdown link, a class named show is added to .nav-item.dropdown and .dropdown-menu, So you have to remove show class when you hover on others dropdown link
$('.nav-link').hover(function() {
$(this).closest('.nav-item.dropdown').siblings('.nav-item.dropdown').removeClass('show').find('.dropdown-menu').removeClass('show');
})
.dropdown:hover>.dropdown-menu {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Welcome - Maqbool Solutions
</title>
<link rel="shortcut icon" href="../images/favion_Y13_5.ico" type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<!--main container-->
<!-- navbar-->
<nav class="navbar navbar-expand-lg navbar-custom fixed-top" id="navbar" style=" height: 80px;">
<div id="logo">
<a href="index.html">
<h3 class="logo_text">Maqbool Solutions</h3>
</a>
</div>
<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" id="ul">
<li class="nav-item " align="center">
<i class="fa fa-home " aria-hidden="true"></i>
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cubes" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="products/ims/ims.html">Institute Managment Systems</a>
<a class="dropdown-item" href="products/pnms/pnms.html">Pension Managment Systems</a>
<a class="dropdown-item" href="products/pms/pms.html">Property Managment Systems</a>
<a class="dropdown-item" href="products/labms/labms.html">Laboratory Managment Systems</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="products/apps/apps.html">Apps</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cogs" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="services/skill_service.html">Training and Skills</a>
<a class="dropdown-item" href="services/indestrial_services.html">Industry Expertise</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/web_service.html">Web services</a>
<a class="dropdown-item" href="services/software_service.html">Software services</a>
<a class="dropdown-item" href="services/animation_service.html">Animation services</a>
<a class="dropdown-item" href="services/graphic_service.html">Graphic services</a>
<a class="dropdown-item" href="services/game_service.html">Game services</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/apps_service.html">App services</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Training
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="training/soft.html">Software Designing & Development</a>
<a class="dropdown-item" href="training/design.html">Designing & Composing</a>
<a class="dropdown-item" href="training/web.html">Web Designing & Development</a>
<a class="dropdown-item" href="training/animation.html">2D&3D Animation & Development </a>
<a class="dropdown-item" href="training/game.html">Game Development </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="training/app.html">App Development </a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-briefcase" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="aboutus/hwr.html">Who we are</a>
<a class="dropdown-item" href="aboutus/our_vision.html">Our vision</a>
<a class="dropdown-item" href="aboutus/our_team.html">Our Team</a>
<a class="dropdown-item" href="aboutus/policy.html">Privacy & Policy</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="career/jobs.html">Jobs</a>
<a class="dropdown-item" href="career/inter.html">Internship</a>
<a class="dropdown-item" href="career/hiring.html">Our Hirring process</a>
</div>
</li>
<li class="nav-item" align="center">
<i class="fa fa-pencil" aria-hidden="true"></i>
<a class="nav-link" href="contect_us.html">Contact Us</a>
</li>
</ul>
</div>
<hr class="col-md-12 nav_hr">
</nav>
<!--end of navbar-->
</div>
</body>
</html>
In your code, while mouse over or click event is fired , "show" class is applied to child menu (dropdown-menu) element.
So you can override that class like:
.dropdown-menu.show {
display: none;
}
to solve your issue and to display menu items only on hover
Simple add following CSS lines:
.dropdown:hover > .dropdown-menu,
.dropdown:hover > .dropdown-menu.show {
display: block;
}
.dropdown > .dropdown-menu,
.dropdown > .dropdown-menu.show {
display: none;
}
I'm trying to migrate to the new version of bootstrap and jQuery.
Dropdown in example not working and console outputs error:
> Syntax error, unrecognized expression: #
This is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<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="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</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>
jquery doesn't add class "show" to parent li and doesn't change aria-expanded attribute.
Seems like jquery v3.2.1 not compatible with botstrap v4, but i saw examples which uses this versions.
Please, help me to resolve this problem.
You did not include Popper.js in your markup.
The javascript part of Bootstrap 4 has been built on top of jQuery and Popper.js. As the documentation points it out: "jQuery must come first, then Popper.js, and then our JavaScript plugins". Including Popper.js will eliminate your error.
Additionally, it is also suggested that these <script> tags should go to near to the end of the pages, right before the closing </body> tag.
So your markup should look like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<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="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>