"Multilingual site menu"
Bootstrap 4.1.1 Snippet by divyalahad

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Multilingual Menu in Navbar Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="navbar.css" rel="stylesheet"> </head> <body> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light rounded"> <a class="navbar-brand" href="#">Indior Tours</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExample09"> <ul class="navbar-nav mr-auto"> <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="#">Destinations</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Types of Trips</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Mice</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Hotels</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Blog</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://www.indiortours.com/" id="dropdown08" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-usd"> </span> USD</a> <div class="dropdown-menu" aria-labelledby="dropdown08"> <a class="dropdown-item" href="#euro"><span class="fa fa-eur"> </span> EUR</a> <a class="dropdown-item" href="#jpy"><span class="fa fa-jpy"> </span> JPY</a> <a class="dropdown-item" href="#gbp"><span class="fa fa-gbp"> </span> GBP</a> <a class="dropdown-item" href="#inr"><span class="fa fa-rupee"> </span> INR</a> <a class="dropdown-item" href="#chf"><span class="fa fa-chf"> <b>SFr. </b></span> CHF</a> <a class="dropdown-item" href="#cad"><span class="fa fa-dollar"> </span> CAD</a> <a class="dropdown-item" href="#aud"><span class="fa fa-dollar"> </span> AUD</a> <a class="dropdown-item" href="#nzd"><span class="fa fa-dollar"> </span> NZD</a> <a class="dropdown-item" href="#zar"><span class="fa fa-zar"><b>R</b> </span> ZAR</a> <a class="dropdown-item" href="#ar"><span class="fa fa-zar-aed"><b>د.إ </b></span> AED</a> <a class="dropdown-item" href="#cny"><span class="fa fa-cny"> </span> CNY</a> <a class="dropdown-item" href="#rub"><span class="fa fa-rouble"> </span> руб</a> <!-- Font Awesome Currency Icons CRC: ₡, // Costa Rican Colón NGN: ₦, // Nigerian Naira PHP: ₱, // Philippine Peso PLN: zł, // Polish Zloty PYG: ₲, // Paraguayan Guarani THB: ฿, // Thai Baht UAH: ₴, // Ukrainian Hryvnia VND: ₫, // Vietnamese Dong --> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://www.indior.tours/" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="flag-icon flag-icon-us"> </span> English</a> <div class="dropdown-menu" aria-labelledby="dropdown09"> <a class="dropdown-item" href="#ar"><span class="flag-icon flag-icon-ar"> </span> اللغة</a> <a class="dropdown-item" href="#cn"><span class="flag-icon flag-icon-cn"> </span> 简体中文</a> <a class="dropdown-item" href="#de"><span class="flag-icon flag-icon-de"> </span> Deutsch</a> <a class="dropdown-item" href="http://translate.google.com/translate?langpair=en|fr&u=http://www.indiortours.com/index.html"><span class="flag-icon flag-icon-fr"> </span> French</a> <a class="dropdown-item" href="#it"><span class="flag-icon flag-icon-it"> </span> Italian</a> <a class="dropdown-item" href="#jp"><span class="flag-icon flag-icon-jp"> </span> 日本語</a> <a class="dropdown-item" href="#pt"><span class="flag-icon flag-icon-pt"> </span> Portuguese</a> <a class="dropdown-item" href="#sp"><span class="flag-icon flag-icon-ru"> </span> русский</a> <a class="dropdown-item" href="#es"><span class="flag-icon flag-icon-es"> </span> Español</a> </div> </li> </ul> <form class="form-inline my-2 my-md-0"> <input class="form-control" type="text" placeholder="Search" aria-label="Search"> </form> </div> </nav> </div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Related: See More

Material Kit React
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

Questions / Comments: